CSS 模块覆盖 UI 样式

Question

所以我在我的 react-app 上使用 Material UI 组件，例如对于按钮文本，我想给它一个 margin-top 和 font-weight，但是，我使用的是 CSS 模块，所以我不能只覆盖默认的 CSS 样式，所以我不得不使用 !important 标志，是否有更清晰/更好的方法来执行此操作并避免使用更好的标志？这是我对某个组件的看法的示例。

我被建议使用原子 CSS，但谷歌搜索似乎他们建议我使用内联样式，而这是我一直想避免的，以便将来可重用。

TIA

Answer 1

通过设置特定的 CSS 类来完成，例如对于这个字体粗细和边距顶部，我的新 CSS 看起来像

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

我的类名如下

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