我注意到 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,
};
最佳答案
在 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 文档)。
希望这对您有所帮助!节日快乐! 🦃🎅
关于reactjs - 如何让 CSS 模块与 Reactstrap cssModule propType 一起工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52743674/