React使用CSS Modules时如何不借助!important覆盖子组件样式

根本原因 #

两个单类选择器优先级相同，CSS 规则的覆盖逻辑由声明顺序决定，若 card.module.scss 的样式加载顺序晚于 home.module.scss，.container 中声明的 height 会覆盖 .card 中的同名属性，导致自定义样式不生效。

可行解决方案 #

• 方案1：提升自定义样式的选择器优先级
  给覆盖样式的选择器增加权重，让它高于单类选择器的优先级，比如增加元素选择器限定：

// home.module.scss
div.card {
    height: 214px;
}

此时选择器优先级为「元素+类」，高于原单类选择器的优先级，无需!important即可生效。

• 方案2：使用CSS变量做样式插槽
  改造Card组件的内置样式，把可自定义的属性替换为带默认值的CSS变量：

// card.module.scss
.container {
    padding: var(--spacer-s);
    background-color: var(--color-primary);
    border-radius: var(--radi-m);
    display: flex;
    /* 替换固定height为带默认值的变量 */
    height: var(--card-height, 150px);
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

覆盖时只需传入对应变量即可：

// home.module.scss
.card {
    --card-height: 214px;
}

该方案扩展性强，后续需要修改其他属性时也可以用相同逻辑处理。

• 方案3：使用内联style属性覆盖
  对于单次临时修改，可以直接通过内联样式传入，内联样式优先级高于类选择器：

// home.tsx
<Card style={{height: 214}}>
  <CardSecondaryText>example</CardSecondaryText>
</Card>

内容的提问来源于stack exchange，提问作者Oğulcan Karayel