扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇内容主要讲解“React和Vue项目问题怎么解决”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“React和Vue项目问题怎么解决”吧!
创新互联专业做网站、成都网站制作，集网站策划、网站设计、网站制作于一体，网站seo、网站优化、网站营销、软文发布平台等专业人才根据搜索规律编程设计，让网站在运行后，在搜索中有好的表现，专业设计制作为您带来效益的网站！让网站建设为您创造效益。
组件库的样式覆盖不掉，这应该是很多前端在工作中遇到过的问题。今天从实际案例出发分析原因，最后会给出在React和Vue项目中的最优解。
本文会讲清：
React中CSS Module的原理是什么？:global是做什么的？
Vue中Scoped的原理是什么？深度作用选择器是什么？
先不讲概念，直接从需求出发：我使用了Antd组件库来展示一个日历。
现在我想将当前日期上面的蓝色边框变成紫色。
可以试试你能不能实现。
不管是React还是Vue，整个Calendar是被封装起来的，我们没有办法在组件外简单加上style/class改动内部的样式。
import { Calendar } from 'antd';
...
首先用开发者工具定位对应的样式：.ant-picker-calendar-date-today，这就是我们要修改的地方。
.ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-today {
border-color: #1890ff;
}熟悉webpack的人应该知道，引入的CSS文件最终都会被style-loader处理。简单来说，它的作用就是把CSS文件打包，放在style标签内，最后塞进HTML中作为一个内部样式表。不管是组件库的样式还是我们写的自定义样式都是这样处理的。
我们要把组件库的样式先于自定义样式引入，这样自定义样式才能有更高的优先级。
直接改组件库的CSS源码是最简单粗暴的方法。打开你项目的node_modules文件夹，一层层点开，找到对应样式文件，按照需求修改即可。
个人项目这样处理确实可行，但是团队合作时，同步别人本地的node_modules就比较麻烦，只能算一个60分解法。
之前提到，把自己写的的CSS文件放在组件库的样式后面，可以保障自定义有更高优先级。只要重写同名的样式，理论上就能实现覆盖组了。
但这样?处理会发现并不起作用：
/* src/demo.css */
.ant-picker-calendar-date-today {
border-color: purple; /* 覆盖为紫色 */
}// src/Demo.js
// 组件库的样式
import 'ant-design-vue/dist/antd.css';
// 自定义样式
import './demo.css'
import { Calendar } from 'antd';
...
因为这里还涉及CSS组合选择器的优先级。
基础的优先级应该不用赘述：!important>内联样式>ID选择器>类选择器>标签选择器。（!important这种hack会导致项目不好维护，不提倡使用）
在这个基础上还有五种组合选择器要对优先级分数做累计，以类选择器为例：
后代选择器（空格）：.A .B选择.A元素后的所有.B元素，
子元素选择器（大于号）：.A>.B选择.A元素的直接后代中的.B元素
相邻兄弟选择器（加号）：.A+.B选择.A元素后紧邻的第一个兄弟.B元素
后续兄弟选择器(~号)：.A~.B选择.A元素后所有的兄弟.B元素
交集选择器（连在一起）：.A.B选择自身同时拥有.A和.B两个属性的元素
上面几个规则看着很复杂，其实用的多的就是第一个后代选择器，记住它就行。Antd组件库用的就是它：
.ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-today {
border-color: #1890ff;
}如果说一个类选择器优先级分数是10分，那三个形成的后代选择器就是30分。
而自定义的样式?只有10分，所以即使放在更后面引入，也不能成功覆盖。
.ant-picker-calendar-date-today {
border-color: purple; // 覆盖为紫色
}需要完整重写整个选择器才能实现想要的效果。
这里补充一点，同样也是组合选择器，但并集选择器（逗号）优先级不累计：
.A, .B选择.A或者.B元素（可以是逗号+空格）
上面我们引入自定义的全局CSS文件，实现了样式的覆盖，但是这种解法只能给80分。因为在实际工作中，项目Owner通常不允许使用全局CSS，这会造成样式污染：你定义了一个样式my_button，团队其他人恰巧也命名为my_button，这就造成样式冲突。
我们需要给每个文件做样式隔离，就好像是给它一个命名空间。通常使React项目使用的是用的是CSS Module，Vue项目使用Scoped标记。
接下来会讲清两种样式隔离的原理，以及使用样式隔离时怎么覆盖组件库的样式。
React的CSS Module
首先来了解一下CSS Module的原理。它的使用很简单，在CSS文件加一个后缀.module，然后当做一个变量引入到JS文件中。
// src/Demo.js
import styles from './demo.module.css';
export default function Demo() {
return (
/* src/demo.module.css */
.myWrapper {
border: 5px solid black;
}被编译后?，插入的样式表和元素的class属性都会加上一个哈希值作为命名空间。