ReactJS和classNames

Question

我是ReactJS的新手，目前使用MERN堆栈创建一个新的应用程序。 我知道，我可以使用外部样式表，通过导入它们： import styles from ./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

的更多信息