React 组件库 CSS 样式问题分析

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

目前存在的问题:

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

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

image2022-12-8_10-40-25.png React 组件库 CSS 样式问题分析 经验总结

关于 CSS 样式冗余问题

是因为多个组件的 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 打包时不会被重复编译进输出文件中。

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

参考文献:

关于webpack打包时候的css style重复的问题(less)

dumi 二次封装antd 遇到很多份重复样式覆盖?

全局样式支持格式,styles是否可以支持import等方式

关于组件之间样式污染问题

本地组件可以采用 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 。

参考文献:

where() - CSS(层叠样式表) | MDN

学透CSS- :is 和 :where 让你的CSS更简洁

react中sass的使用,解决样式污染,样式穿透


未经允许不得转载:w3h5 » React 组件库 CSS 样式问题分析

赞 (1)
分享到: +

评论 沙发

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)