React 组件库 CSS 样式问题分析

首先分享一篇网易云音乐技术团队整理的一篇文章 React 组件库 CSS 样式方案分析

目前存在的问题：

1. antd 样式被重复引用，打包时被重复编译进 css 文件，造成代码冗余。

2. 组件自定义样式没有通过类名区分，导致页面中使用多个组件时样式污染。

是因为多个组件的 less 文件中引用了 antd.variable.less 文件，用来实现主题的切换，打包时会重复/多次把这个文件编译进输出的 css 文件中。

/* /components/packageName/index.less */
@import '~antd/dist/antd.variable.less';

解决方法是增加一个 index.less 的入口文件，在其中统一引用 antd.variable.less 文件。

/* index.less */
@import '~antd/dist/antd.variable.less';

组件中使用 antd.variable.less 文件时，通过 reference 引入：

/* /components/packageName/index.less */
@import (reference) '~antd/dist/antd.variable.less';

通过 reference 引入的文件，webpack 打包时不会被重复编译进输出文件中。

同时在组件开发中，也可以把公共样式提取出来，减少冗余代码。

参考文献：

本地组件可以采用 cssModules 维持类名的方式，也就是借用 :global 来找到组件的类名：

举个例子：

/* index.less */
.panUI {
  :global {
    .ant-btn-primary {
      font-size: 18px;
    }
  }
}

编译后：

.panUI___1Np0V .ant-btn-primary {
    font-size: 18px;
}

这样就大大避免了组件之间的样式污染。

私有源组件可以通过增加父元素类名的方式进行区分：

/* index.less */
.parent-content {
  .ant-btn-primary {
    font-size: 18px;
  }
}

如果方便使用者对组件样式进行修改，可以使用 :where() ：

/* index.less */
:where(.parent-content) {
  .ant-btn-primary {
    font-size: 18px;
  }
}

antd5 中有用到，作用是 :where() 的优先级总是为 0 。

参考文献：