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

<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

还有没有更好的方案？