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

Question

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

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

p {
 ...
}

直到我在另一个组件中使用了 ap 元素并且将相同的 styles 应用于它之前，它工作得很好。 有没有办法解决这个问题，还是我需要给我所有的元素一个 className={styles.whatever}

Answer 1

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

你可以做这样的事情，其中 styles 直接p标签：

style.css

.myClass {
    color: #fff;
}

mypage.html

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

您也可以这样做，以便另一个标签（即div ）中的任何p元素都使用以下样式：

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>