reactjs - 如何让 CSS 模块与 Reactstrap cssModule propType 一起工作？

Question

我注意到 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>

```

但是，这似乎行不通。检查我的 React 开发工具，cssModule 属性评估为 undefined。

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

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

---

此处引用的是 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,
};

Answer 1

在 cssModule 上

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

Reactstrap 使用 mapToCssModules 来完成这项工作。请参阅其文档 here .记下使用示例:

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

所以你的案例看起来像这样:

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

虽然这将完全抑制“form-text”类(在您的情况下，它只贡献了 display: block 。如果您想更有选择性地覆盖，请参见下文。

---

试试这个

在FormText source code ，看起来您可以用不同的方式进行覆盖:

• 如果您想省略 form-text一共上课，包括inline作为 Prop ，
• 如果您想省略任何与颜色相关的 Bootstrap 类，请将“颜色”设置为 false (或其他 falsy )，
• 设置className支持您的 CSS 模块对象 ( styles.formtext )。

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

这里最重要的部分实际上是className支柱。您还可以通过包含 tag 来进一步覆盖样式prop(再次检查 FormText 文档)。

---

希望这对您有所帮助!节日快乐! 🦃🎅