CSS模块覆盖UI样式

Question

所以我在react-app上使用Material UI Components，例如用于按钮文本，我想给它提供页边距和字体粗细，但是，我正在使用CSS模块，所以我不能只覆盖默认的CSS样式，所以我不得不使用！important标志，是否有一种更干净/更好的方法来做到这一点并避免使用更好的标志？这是某个组件的外观示例。

有人建议我使用原子CSS，但是谷歌搜索似乎是他们建议我使用内联样式，这是我一直在避免将来重用的意思。

TIA

Answer 1

通过设置特定的CSS类（例如，针对此字体粗细和边距顶部）进行浏览，我的新CSS看起来像

.loginSignUpLink.priority {
    margin-top: 4%;
    font-weight: 1000;
}

我的班级名称如下

className={classNames(styles.loginSignUpLink, styles.priority)}

Answer 2

在CSS中使用重要代码不是一个好方法。我希望您使用父类或标签来避免重要。 非常重要的一点是，CSS在所有CSS文件之后排在最后。这是最重要的。 例如，请检查以下代码。

<div class="test">
   <span class="span"></span>
</div>

比这样写下跨度的css

div.test span.span{ ... }

此外，您使用更多层次结构以避免在css中变得重要

body div.test span.span{ ... }