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

【问题标题】：How to get CSS Modules to work with Reactstrap cssModule propType?如何让 CSS 模块与 Reactstrap cssModule propType 一起使用？
【发布时间】：2019-03-15 13:39:05
【问题描述】：

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

【问题讨论】：

标签： reactjs reactstrap react-css-modules

【解决方案1】：

在 cssModule 上

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

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 作为道具，
如果您想省略任何与颜色相关的引导类，请将“颜色”设置为 false（或 falsy），
将 className 属性设置为您的 CSS 模块对象 (styles.formtext)。

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

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

希望这对您有所帮助！节日快乐！ ??

【讨论】：

【解决方案2】：

我并没有真正得到公认的答案，但我最近遇到了同样的问题，在我看来，cssModule 的行为完全符合人们的预期。您只需传递一个导入的模块对象，然后指定它们将被模块引用的类。

这是我的示例（来自 create-react-app）我如何修复 Navbar 以从我的引导模块中获取它的引导样式（因为我没有全局导入引导程序）：

import cx from 'classnames';
import bootstrap from 'bootstrap/dist/css/bootstrap.css';
import navbar from './navbar.css';

let styles = Object.assign({}, bootstrap, navbar);

public render() {
    return (<Navbar cssModule={styles} className={cx(styles.navbarExpandSm, styles.navbarToggleableSm, styles.borderBottom, styles.boxShadow, styles.mb3)} light>[your menu here]</Navbar>);
}

这只是说控件采用样式模块并引用在 classNames 中传递给它的所有类名。如果你看一下mapToCssModules 方法，它就是它的作用。 https://github.com/reactstrap/reactstrap/blob/d3cd4ea79dcaf478af5984f760ff1290406f62a5/src/utils.js#L53

在我的例子中，它允许控件选择原始引导样式，并且我可以覆盖我自己模块中需要的内容。

【讨论】：