关于 css 模块的一个快速问题，以及我是否总是需要 className

编程问答 2022-05-26

问题描述

所以我刚刚遇到了一个让我在 react(cra) 应用程序中使用 css 模块感到困惑的错误，我只能通过查看从 css 模块注入头部的样式标签来解决它

我的问题出在我的 style.module.css 文件中，我有一些像这样的通用选择器

p {
 ...
}

直到我在另一个组件中使用了 p 元素并且对它应用了相同的样式之前，这一切都很好。有没有办法解决这个问题，或者我需要给我的所有元素一个 className={styles.whatever}

解决方法

p 标记将应用于页面上的所有 p 元素。假设您使用类：

您可以执行以下操作，直接设置 p 标签的样式：

style.css

.myClass {
    color: #fff;
}

mypage.html

<p class="myClass">This text is styled</p>

您也可以这样做，以便将任何 p 元素in 另一个标签（即 div）的样式设置为：

style.css

.myClass p {
    color: #fff
}

mypage.html

<div class="myClass">
    <p>This text will be styled</p>
</div>

如果您想设置单个元素的样式，您可能喜欢使用 style HTML 属性，您可以这样做：

<p style="color: #eb4034>This text will be red</p>
css-moduleshtmlreactjsreactjsreactjsreactjs