如何同时使用 css-modules 和 bootstrap？

Question

我正在为我的项目使用电子反应样板，这个样板使用 css-modules 来设计样式。我在同一个地方使用引导程序和自定义样式时遇到问题。假设我有一个代码片段，例如，

<div className="container">
  <div className="row custom-css">
    // other codes...
</div>

在这种情况下，'row' 是一个引导类名，'custom-css' 是我自己的样式类名。请帮助我为这些问题找到一些解决方案，以便我可以一起使用css-modules和bootstrap ...

Answer 1

谢谢大家，我发现它通过添加{}它来工作

<div className={`row ${styles.myCustomClassName}`} />

Answer 2

您需要从特定于此组件的模块文件中导入 CSS 模块样式，然后通过返回的对象将它们插入到类名中...

我的组件.css

.myCustomClassName {
  color: #fff;
}

我的组件.js

import styles from './MyComponent.css';

<div className=`row ${styles.myCustomClassName}` />

当输出为 HTML 时，这将变成类似......

<div class="row MyComponent__myCustomClassName___n1cC4ge}` />

所以只要你在某处加载引导 CSS 应该在两个