时间戳

首页 > 解决方案 > 如何让 CSS 模块与 Reactstrap cssModule propType 一起使用？

reactjs - 如何让 CSS 模块与 Reactstrap cssModule propType 一起使用？

问题描述

我注意到 Reactstrap 文档中的大多数表单元素都有一个 cssModule 的 PropType。我假设这意味着我可以覆盖默认的 Reactstrap 样式并执行以下操作：

Formtext.module.css

.formtext {
  background-color: blue;
  border: 2px solid black;
  margin: 10px;
}

SimpleForm.jsx

import styles from "./Formtext.module.css";
...

<FormText cssModule={styles.formtext}>
   This is some placeholder help text...
</FormText>

```

但是，这似乎不起作用。检查我的反应开发工具 cssModule 属性评估为undefined.

我正在使用使用 Reactstrap 5.0 和 create-react-app 1.1.5

有什么我不知道我需要做的事情吗？我需要弹出才能使用 css-modules 吗？有人可以指出一个如何正确使用 Reactstrap 的 cssModule 道具的例子吗？

这里的参考是来自 Reactstrap 文档的 proptypes 定义

FormText.propTypes = {
  children: PropTypes.node,
  inline: PropTypes.bool,
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), // default: 'small'
  color: PropTypes.string, // default: 'muted'
  className: PropTypes.string,
  cssModule: PropTypes.object,
};

标签： reactjsreactstrapreact-css-modules

解决方案

在 cssModule 上

看起来 cssModules 的行为不像你想象的那样；该道具不采用单一的覆盖类 - 它采用被拒绝的类和替换类。

Reactstrap 使用 mapToCssModules 来完成这项工作。在此处查看其文档。注意使用示例：

<Example tag="div" cssModule={{ 'w-100': 'w-75' }} />

所以你的情况看起来像这样：

<FormText cssModule={{ 'form-text' : styles.formtext }} />

不过，这将完全抑制 'form-text' 类（在您的情况下，它只会贡献display: block. 如果您想更有选择性地覆盖，请参见下文。

试试这个

在FormText 源代码中，您似乎可以以不同的方式进行覆盖：

  • 如果您想form-text完全省略该类，请inline作为道具包含，
  • 如果您想省略任何与颜色相关的引导类，请将“颜色”设置为false（或其他falsy），
  • 将classNameprop 设置为您的 CSS 模块对象 ( styles.formtext)。

<FormText className={styles.formText} color='' inline> Test formtext </FormText>

这里最重要的部分实际上是className道具。您还可以通过包含一个tag道具来进一步覆盖样式（再次检查 FormText 文档）。

希望这有帮助！节日快乐！

推荐阅读