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 dev工具，cssModule属性的评估结果为undefined。

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

我是否不知道该做些什么？我需要弹出才能使用CSS模块吗？有人可以给我指出一个如何正确使用Reactstrap的cssModule prop的示例吗？

作为参考，这里是Reactstrap文档中的原型定义

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的行为不像您想象的那样。道具不需要一个单一的，覆盖的类-它需要一个被拒绝的类和一个替换类。

Reactstrap使用mapToCssModules完成此操作。请参阅其文档here。注意用法示例：

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

所以您的案子看起来像这样：

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

这将完全压制'form-text'类（在您的情况下，仅贡献display: block。如果要更选择性地覆盖，请参见下文。< / p>

改为尝试

在FormText source code中，您似乎可以以其他方式进行覆盖：

如果您想完全省略form-text类，请加入inline作为道具，
如果要省略任何与颜色相关的引导程序类，请将'color'设置为false（或其他falsy），
将className属性设置为CSS模块对象（styles.formtext）。

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

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

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

Answer 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>);
}

这只是说控件采用了styles模块，并引用了classNames中传递给它的所有类名。如果您看看mapToCssModules方法，它就是它的功能。 https://github.com/reactstrap/reactstrap/blob/d3cd4ea79dcaf478af5984f760ff1290406f62a5/src/utils.js#L53

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

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

2 个答案:

在cssModule上

改为尝试

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