代码之家 › 专栏 › 技术社区 › rakitin

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

react-css-modules reactstrap reactjs

0

rakitin · 技术社区 · 6 年前

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

Formtext.module.css格式

.formtext {
  background-color: blue;
  border: 2px solid black;
  margin: 10px;
}

简单表单.jsx

import styles from "./Formtext.module.css";
...

<FormText cssModule={styles.formtext}>
   This is some placeholder help text...
</FormText>

然而,这似乎不起作用。正在检查cssModule prop计算到的react dev工具 undefined

有什么我不知道的事情需要做吗?

以下是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,
};

1 回复 | 直到 6 年前

1

3

Walker 6 年前

看起来cssModules的行为和您想象的不太一样;道具不需要一个重写类-它需要一个被拒绝的类和一个替换类。

here

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

所以你的案子看起来像这样:

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

完全地 display: block . 如果您想更有选择性地重写,请参见下面的。

试试这个

在 FormText source code

如果你想省略 form-text inline 作为道具,
如果要省略任何与颜色相关的引导类,请将“color”设置为 false falsy ),
设置 className 属性到CSS模块对象( styles.formtext

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

这里最重要的部分实际上是 类名 道具。还可以通过包含 tag prop(再次检查FormText文档)。

2

1

VoÄko 5 年前

我没有得到公认的答案,但我最近也遇到了同样的问题,在我看来, 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>);
}

这简单地说,控件获取样式模块并引用所有传入类名的类名。如果你看看 mapToCssModules 方法,它就是这样做的。 https://github.com/reactstrap/reactstrap/blob/d3cd4ea79dcaf478af5984f760ff1290406f62a5/src/utils.js#L53

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