首先分享一篇网易云音乐技术团队整理的一篇文章 React 组件库 CSS 样式方案分析
目前存在的问题：
- antd 样式被重复引用，打包时被重复编译进 css 文件，造成代码冗余。
- 组件自定义样式没有通过类名区分，导致页面中使用多个组件时样式污染。
关于 CSS 样式冗余问题
是因为多个组件的 less 文件中引用了 antd.variable.less 文件，用来实现主题的切换，打包时会重复/多次把这个文件编译进输出的 css 文件中。
代码语言：javascript复制/* /components/packageName/index.less */
@import '~antd/dist/antd.variable.less';解决方法是增加一个 index.less 的入口文件，在其中统一引用 antd.variable.less 文件。
代码语言：javascript复制/* index.less */
@import '~antd/dist/antd.variable.less';组件中使用 antd.variable.less 文件时，通过 reference 引入：
代码语言：javascript复制/* /components/packageName/index.less */
@import (reference) '~antd/dist/antd.variable.less';通过 reference 引入的文件，webpack 打包时不会被重复编译进输出文件中。
同时在组件开发中，也可以把公共样式提取出来，减少冗余代码。
参考文献：
关于webpack打包时候的css style重复的问题(less)
dumi 二次封装antd 遇到很多份重复样式覆盖？
全局样式支持格式，styles是否可以支持import等方式
关于组件之间样式污染问题
本地组件可以采用 cssModules 维持类名 的方式，也就是借用 :global 来找到组件的类名：
举个例子：
代码语言：javascript复制/* index.less */
.panUI {
:global {
.ant-btn-primary {
font-size: 18px;
}
}
}编译后：
代码语言：javascript复制.panUI___1Np0V .ant-btn-primary {
font-size: 18px;
}这样就大大避免了组件之间的样式污染。
私有源组件可以通过增加父元素类名的方式进行区分：
代码语言：javascript复制/* index.less */
.parent-content {
.ant-btn-primary {
font-size: 18px;
}
}如果方便使用者对组件样式进行修改，可以使用 :where() ：
代码语言：javascript复制/* index.less */
:where(.parent-content) {
.ant-btn-primary {
font-size: 18px;
}
}antd5 中有用到，作用是 :where() 的优先级总是为 0 。
参考文献：
where() - CSS（层叠样式表） | MDN
学透CSS- :is 和 :where 让你的CSS更简洁
react中sass的使用，解决样式污染，样式穿透
未经允许不得转载：w3h5 » React 组件库 CSS 样式问题分析
