react 按需引入antd之后，antd的CSS 优先级高于自定义的common.css，导致样式冲突

Question

如题，按照文档说明按需引入antd之后不再需要手动引入antd.css文件，只在引用到antd组件的时候才会加载antd的css，

然后我自己定义了一个common.css 文件，用于样式初始化。并在最顶层的App.js中引入

这时候就发现，我的common.css中的样式被antd覆盖了，比如 h标签的一些初始化

antd的css 在common.css 后面

请问这种情况怎么处理

Answer 1

antd的样式会加载到页面的style标签里面,就算配置了按需加载,也只是说不加载没引用的样式,可是你用到的还是会被加载到style标签里面,这样就会产生冲突.
解决办法就是让自己的样式不去使用全局样式就好了.
这类技术有

• 原生的内联样式
• css-modules

• CSS in JS

  • styled-components
  • radium
• ...等

antd有自己的一套设计原则,如果用他们的组件一般都是用全套的,少部分修改的可以用上面几种技术解决.如果要大部分修改,可能不太适合用antd.
或者你可以尝试下定制主题,只是可自定义的不多.
如果要从antd方面彻底解决的话,你可以详细看看参考的第二个链接.里面有大量的讨论.有一些解决方案,不过我没有尝试过,所以这些需要你亲自去尝试一下.

参考

• 9 CSS in JS Libraries you should Know in 2019
• Global CSS included with component CSS import