javascript - ReactJS 和类名

Question

我是 ReactJS 的新手，目前正在使用 MERN 堆栈创建新应用程序。我知道，我可以通过导入外部样式表来使用它们:从 ./Header.css 导入样式

用法:

<div className={styles["logo-home"]}>
    test
</div>

.css 文件:

.logo-home {
    background-color: #eee;
}

这工作正常，但我无法找到如何访问类似的内容:

.logo-home .inner {
    background-color: #000;
}

我想，当我写像 styles["logo-home"].inner 或 styles.inner 这样的东西时，这会起作用，但它没有.. .

解决此问题的正确/最佳方法是什么？

Answer 1

如果您要克隆 MERN starter repo ，您可能正在使用 CSS 模块(通过 webpack 的设置)。

这里的想法是您以模块化的方式拥有自己的样式和它们自己的范围。这是通过向每个类名添加一些散列来实现的。就像这个例子:

所以假设你有

<div className={styles["logo-home"]}>
   <div className={styles["inner"]}>
      bla bla bla
   </div>
</div>

您导入的 .css 文件可能如下所示:

.logo-home { /* ... */ }
.inner { /* ... */ }

如您所见，不需要像在传统 CSS 中使用的 CSS 选择器。您只需将每个容器映射到一个类名，CSSModules 将确保您的类名不会在所有模块中发生冲突。

您可以阅读有关 CSSModules 的更多信息 here