如何在CSS Modules中不用!important让类样式覆盖组合样式？

你遇到的是CSS Modules中composes指令导致的样式优先级冲突：当使用composes继承另一个类的样式时，最终编译后的CSS里，被继承类的样式可能会排在当前类样式的后面。由于两个类的选择器优先级相同（都是单类选择器），后声明的样式会覆盖先声明的，所以btnSecondary的align-self: flex-end会盖掉btnInteract的align-self: flex-start。

方案1：提升当前类的选择器优先级 #

通过重复类名或者添加伪类选择器，让btnInteract的align-self规则优先级高于继承来的样式：

// 另一个文件中
.btnInteract {
  composes: btnSecondary from "../buttons.module.css";
  /* 用自身类名重复选择，提升优先级 */
  &.btnInteract {
    align-self: flex-start;
  }
  margin-bottom: 15px;
}

编译后这条规则的优先级会高于单类选择器的btnSecondary样式，就能正常生效。

方案2：拆分基础样式，从根源避免覆盖 #

更优雅的方式是把btnSecondary中的通用样式抽成独立的基础类，让btnSecondary和btnInteract分别继承基础类，再各自定义差异化样式：

// buttons.module.css中拆分样式
.btnBase {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 8px;
}

.btnSecondary {
  composes: btnBase;
  align-self: flex-end;
}

// 另一个文件中使用基础类
.btnInteract {
  composes: btnBase from "../buttons.module.css";
  align-self: flex-start;
  margin-bottom: 15px;
}

这种方式既保持了样式复用性，又避免了不必要的样式覆盖，适合长期维护。

内容的提问来源于stack exchange，提问作者Ryan Peschel