代码分割的时候产生了一个样式问题,一时竟想不出来一个合适优雅的解决办法
发布于 8 个月前 作者 dislido 784 次浏览 来自 问答

情况是这样的,如下一个组件

<Input.Group className="margin8">
  // ...
</Input.Group>

渲染出来是这样

<span class="ant-input-group margin8">
  // ...
</span>

其中ant-input-group的样式是antd的,margin8是我写的

.ant-input-group {
  margin: 0;
}

.margin8 {
  margin: 8px 0;
}

两个选择器同权重,我的css靠后所以最终结果是margin: 8px 0
但是在代码分割后,.ant-input-group的样式变成懒加载了,所以加载后就放在了.margin8后面覆盖了它的样式,变成了margin: 0;

这个问题应该怎么解决?

目前想到的方法

  • 修改.margin8选择器来提升它的权重 这个直接pass
  • .margin8的属性设为!important,虽然不太喜欢用这个东西,但是好像用在这里并没有什么不合适,毕竟我加了这个类一定是希望它的margin设为8px 0,所以它的优先级应当最高。但是想一想这样的话以后所有这样的样式都要靠加!important来处理这个问题
  • 把我的css单独分割出来放在最后 目前想到的最好的方法,正在研究怎么配置webpack

还有没有更好的方案?

回到顶部