React 组件库 CSS 样式问题分析
2023-06-13 09:15:45 时间
首先分享一篇网易云音乐技术团队整理的一篇文章 React 组件库 CSS 样式方案分析
目前存在的问题:
1. antd 样式被重复引用,打包时被重复编译进 css 文件,造成代码冗余。
2. 组件自定义样式没有通过类名区分,导致页面中使用多个组件时样式污染。
关于 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)
全局样式支持格式,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 。
参考文献:
未经允许不得转载:w3h5 » React 组件库 CSS 样式问题分析
相关文章
- react中类组件传值,函数组件传值:父子组件传值、非父子组件传值[通俗易懂]
- React Error: Failed at the xxx@0.1.0 start script 'react-scripts start'.
- React中定义组件
- 学用Hooks写React组件——基础版移动端无缝轮播图组件
- Vue 全部生命周期组件整理
- Vue 组件通信与路由
- React 组件通讯
- 从react源码角度看React-Hydrate原理
- 2022年面向前端开发人员的9个最佳UI组件库/框架
- 面试官:你是怎样进行react组件代码复用的1
- SpringBoot自动装配原理分析,手写starter组件
- react组件传值
- React--8: 组件的三大核心属性2:props
- React入门六: 组件基础练习
- (十四)组件逻辑复用Composables
- react 基础之组件篇二——Style in React
- 【Android 内存优化】自定义组件长图组件 ( 自定义组件构造方法 )
- 【错误记录】布局组件加载错误 ( Attempt to invoke virtual method ‘xxx$Callback android.view.Window.getCallback()‘ )
- 【Android 插件化】Hook 插件化框架 ( Hook Activity 启动流程 | 主线程创建 Activity 实例之前使用插件 Activity 类替换占位的组件 )
- Swift开发React Native组件详解手机开发
- 如何优化性能?如何优化Oracle数据库性能?25字提示:对于许多企业来说,Oracle数据库是一个关键的数据中心组件。对于管理员,必须经常优化其性能以确保系统正常运行。(连oracle数据库)
- 前端开发技术中,Redis成为不可或缺的重要组件(前端 redis)