如何让 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>

```

但是，这似乎不起作用。检查我的反应开发工具 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,
};

Answer 1

在 cssModule 上

看起来 cssModules 的行为并不像您想象的那样；该道具不采用单一的覆盖 class - 它采用拒绝的 class 和替换 class.

Reactstrap 使用 mapToCssModules 来完成这项工作。请参阅其文档 here。注意使用示例：

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

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

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

这将完全压制 'form-text' class 不过（在你的情况下，它只会贡献 display: block。如果你愿意要更有选择性地覆盖，请参阅下文。

试试这个

在 FormText source code 中，您似乎可以用不同的方式进行覆盖：

如果你想完全省略 form-text class，请包括 inline 作为道具，
如果您想省略任何与颜色相关的 bootstrap classes，请将 'color' 设置为 false（或其他 falsy），
将 className 属性设置为您的 CSS 模块对象 (styles.formtext)。

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

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

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

Answer 2

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

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

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 中传递的所有 class 名称。如果您看一下 mapToCssModules 方法，它就是它的作用。 https://github.com/reactstrap/reactstrap/blob/d3cd4ea79dcaf478af5984f760ff1290406f62a5/src/utils.js#L53

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

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

How to get CSS Modules to work with Reactstrap cssModule propType?

reactjs

reactstrap

react-css-modules

在 cssModule 上

试试这个

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