Question

我真的很喜欢CSS模块系统以及在create-react-app中导入和使用它们的简单方法。我还喜欢这样在SCSS中嵌套类的功能：

.unit {
   .text {
      font-size: 0.8rem;
   }
}

.text {
  color: red;
}

但是如果我将这些样式导入我的组件并像这样使用它们...

import styles from './style.module.scss';

<div className={styles.unit}>
  <div className={styles.text}>small... and red!</div>
</div>

<div className={styles.text}>red</div>

... styles.text显然将是同一类，而“ unit” div中的文本将为红色，因此，如果我不希望这种继承，则必须在单独的文件中保留具有相同名称的类。

我的问题是：我可以以某种更好的方式使用它吗？例如我很乐意像这样使用它：

<div className={styles.unit.text}></div>

但是也许我缺少更好的内置解决方案或工具？

Answer 1

如果您更改

import styles from './style.module.scss';

到

import './style.module.scss';

它应该工作

由于SCSS（和CSS！）文件不会导出任何内容，因此没有要导入的内容，因此您想导入整个文件。

Answer 2

答案：不要这样做。您应该保持样式模块很小，并且只能在一个组件内使用。

在React App中使用CSS / SCSS模块的便捷方法

2 个答案: