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

Question

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

表单文本.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 prop 的计算结果为undefined.

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

有什么我不知道但我需要做的事情吗？我需要弹出才能使用 css 模块吗？有人可以向我指出如何正确使用 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,
};

Answer 1

在 css 模块上

看起来 cssModules 的行为并不像你想象的那样；该 prop 不采用单一的、压倒一切的类 - 它采用被拒绝的类和替换类。

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），
• 将 prop设置className为 CSS 模块对象 ( styles.formtext)。

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

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

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