html 如何让类样式覆盖CSS模块中的组合样式而不使用important？

jhkqcmku 于 2022-12-09 发布在其他

关注(0)|答案(1)|浏览(163)

我在项目中使用CSS模块和composes命令，如下所示：

// In one file

.btnSecondary {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-self: flex-end;
  padding: 12px 20px;
  border-radius: 8px;
}

// In another file

.btnInteract {
  composes: btnSecondary from "../buttons.module.css";
  align-self: flex-start;
  margin-bottom: 15px;
}

在编译后的网页中，令我惊讶的是，align-self: flex-start;被.btnSecondary类否决了，如下所示：

我可以通过在btnInteract类中使用!important来解决这个问题，但我不想在任何地方都这样做。另一个人可能会问为什么我在.btnSecondary类中使用align-self: flex-end。嗯，这是因为99%的情况下，我在其他类中都是这样做的。只是在这种情况下不是这样。

Html

来源：https://stackoverflow.com/questions/74731864/how-to-have-class-styles-override-composed-style-in-css-modules-without-using-im

1条答案

按热度按时间

v7pvogib1#

CSS特异性层次结构拯救了我们！
您可以使用更具体的元素描述来替代现有样式。

.btnInteract {
  color: #deface;
}

// following selector is more important
.parent .btnInteract {
  color: #FB1;
}

对于您的问题，更简单的解决方案是使用id属性而不是class。在这种情况下，从浏览器的Angular 来看，id属性比class属性更重要。
这里是the link，这是一篇关于这个主题的好文章。

赞(0）回复(0）举报 2022-12-09

我来回答

html 如何让类样式覆盖CSS模块中的组合样式而不使用important？

1条答案

相关问题

热门标签

最新问答