vue vidéo tutoriel🎜)🎜🎜Ne parlons pas du concept d'abord, et partons directement des exigences : j'ai utilisé la bibliothèque de composants Antd pour afficher un calendrier. 🎜🎜
🎜🎜Maintenant Je souhaite changer la bordure bleue au-dessus de la date actuelle en violette. 🎜🎜Vous pouvez essayer de voir si vous pouvez y parvenir. 🎜🎜Qu'il s'agisse de React ou de Vue, l'intégralité du Calendrier est encapsulé. Nous ne pouvons pas simplement ajouter un style/classe en dehors du composant pour changer le style interne. 🎜// src/Demo.js
import styles from './demo.module.css';
export default function Demo() {
return (
<div className={styles.myWrapper}>
<Calendar />
</div>
);
}Copier après la connexion
Copier après la connexion
Localisez le style à écraser
🎜Utilisez d'abord les outils de développement pour localiser le style correspondant : .ant-picker-calendar-date- aujourd'hui< /code>, c'est ce que nous souhaitons modifier. <br/>🎜🎜<img src="https://img.php.cn/upload/image/101/753/234/1652670415522180.png" title="1652670415522180.png" alt="Comment remplacer les styles de bibliothèque de composants ? Une brève analyse des solutions aux projets React et Vue"/ >🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">/* src/demo.module.css */
.myWrapper {
border: 5px solid black;
}</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div>🎜Ceux qui connaissent webpack doivent savoir que les fichiers CSS importés seront éventuellement traités par style-loader. En termes simples, sa fonction est de conditionner le fichier CSS, de le placer dans la balise de style et enfin de l'insérer dans HTML en tant que feuille de style interne. Cela se fait, qu'il s'agisse du style de la bibliothèque de composants ou du style personnalisé que nous avons écrit. 🎜🎜<img src="https://img.php.cn/upload/image/480/863/763/1652670424615390.png" title="1652670424615390.png" alt="Comment remplacer les styles de bibliothèque de composants ? Une brève analyse des solutions aux projets React et Vue"/>🎜🎜nous Les styles de la bibliothèque de composants doivent être introduits avant les styles personnalisés, afin que ceux-ci puissent avoir une priorité plus élevée. 🎜<h2><strong>Modifier les fichiers sources</strong></h2><hr/>🎜 Changer directement le code source CSS de la bibliothèque de composants est la méthode la plus simple et la plus grossière. Ouvrez le dossier node_modules de votre projet, cliquez dessus couche par couche, recherchez le fichier de style correspondant, et modifiez-le selon vos besoins. <br/>🎜🎜Il est en effet possible de gérer des projets personnels de cette manière, mais lorsque l'on travaille en équipe, il est plus difficile de synchroniser les node_modules locaux d'autres personnes, et cela ne peut être considéré que comme une méthode de décomposition en 60. 🎜<h2><strong>Fichiers CSS globaux</strong></h2><hr/>🎜Comme mentionné précédemment, placer vos propres fichiers CSS derrière les styles de la bibliothèque de composants peut garantir que les personnalisations ont une classe de priorité plus élevée. Tant que vous réécrivez le style du même nom, vous pouvez théoriquement implémenter un groupe de remplacement. <br/>🎜🎜Mais ça ? Le traitement constatera qu'il ne fonctionne pas : 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><style>
.demo_myWrapper__Hd9Qg {
border: 5px solid black;
}
</style>
<div class="demo_myWrapper__Hd9Qg">
...
</div></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">:global(.ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-today) {
border-color:purple; /* 覆盖为紫色 */
}</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div>🎜Parce que la priorité du sélecteur de combinaison CSS entre également en jeu. 🎜🎜La priorité de base devrait aller de soi : <code>!important>Styles en ligne>Sélecteur d'ID>Sélecteur de classe>Sélecteur de balises. (!important Ce type de hack rendra le projet difficile à maintenir et son utilisation n'est pas recommandée) 🎜🎜Sur cette base, il existe cinq sélecteurs de combinaison qui doivent accumuler des scores prioritaires. Prenons l'exemple du sélecteur de classe : 🎜🎜🎜. 🎜Sélecteur de descendants (espace) : .A .B Sélectionne tous les éléments .B après l'élément .A, 🎜🎜🎜Sélecteur de sous-éléments (supérieur au signe) : . A> .BSélectionne les éléments .B parmi les descendants directs des éléments .A🎜🎜🎜Sélecteur de frères et sœurs adjacents (signe plus) : .A+.BSélectionne les éléments .A premier élément sibling.B immédiatement après 🎜🎜🎜Sélecteur de frère ou sœur suivant (~ numéro) : .A~.B sélectionne tous les éléments sibling.B après l'élément A🎜 🎜 🎜Sélecteur d'intersection (connectés ensemble) : .A.B sélectionne les éléments qui ont à la fois les attributs .A et .B🎜🎜ce qui précède Cette règle peut sembler compliquée, mais la plus pratique l'un est le premier sélecteur de descendant. Rappelez-vous-en. La bibliothèque de composants Antd l'utilise : 🎜:global {
.ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-today {
border-color:purple;
}
}Copier après la connexion
Copier après la connexion
/* 加上了哈希*/
.demo_myWrapper__Hd9Qg {
border: 5px solid black;
}
/* :global作用域下都不会加上哈希*/
.ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-today {
border-color:purple;
}Copier après la connexion
Copier après la connexion
🎜Une chose à ajouter ici est qu'il s'agit également d'un sélecteur de combinaison, mais la priorité du sélecteur d'union (virgule) n'est pas cumulative : .A, .B sélectionne .A ou . Éléments B (peut être une virgule + un espace)🎜
样式隔离CSS Module和Scoped
上面我们引入自定义的全局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 (
<div className={styles.myWrapper}>
<Calendar />
</div>
);
}Copier après la connexion
Copier après la connexion
/* src/demo.module.css */
.myWrapper {
border: 5px solid black;
}Copier après la connexion
Copier après la connexion
被编译后?，插入的样式表和元素的class属性都会加上一个哈希值作为命名空间。
<style>
.demo_myWrapper__Hd9Qg {
border: 5px solid black;
}
</style>
<div class="demo_myWrapper__Hd9Qg">
...
</div>Copier après la connexion
Copier après la connexion
可以看到，原本的CSS选择器和HTML元素类名都从myWrapper变成了demo_myWrapper__Hd9Qg，前面加上了文件名，后面加上了哈希值，这样就能保障样式只在当前这个文件下生效了。
但是在这种样式隔离情况下，我们原本用作覆盖的CSS也被加上了哈希值，就像下图这样，这时没有办法选中UI组件，覆盖也就不会成功。
所以，React给我们提供了一个语法:global。它生效范围内的样式会被当作全局CSS。
具体使用如下，在CSS文件中，使用:global包裹希望全局生效的样式
:global(.ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-today) {
border-color:purple; /* 覆盖为紫色 */
}Copier après la connexion
Copier après la connexion
SCSS或SASS中，还可以使用嵌套语法：
:global {
.ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-today {
border-color:purple;
}
}Copier après la connexion
Copier après la connexion
最后编译出来的代码如下：
/* 加上了哈希*/
.demo_myWrapper__Hd9Qg {
border: 5px solid black;
}
/* :global作用域下都不会加上哈希*/
.ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-today {
border-color:purple;
}Copier après la connexion
Copier après la connexion
借助:global语法，即使使用CSS Module进行样式隔离也可以如愿实现覆盖功能。
Vue中的Scoped
Vue中也有类似的样式隔离功能，使用Scoped标记CSS部分，使用也很简单?：
<style scoped>
.myWrapper{
border: 5px solid black
}
</style>
...
<div class="myWrapper" >
<Calendar />
</div>
...Copier après la connexion
编译出来的代码如下：
<style>
.myWrapper[data-v-2fc5154c] {
border: 5px solid black
}
</style>
<div class="myWrapper" data-v-2fc5154c>
...
</div>Copier après la connexion
可以看到，它的原理和CSS Module不太一样，Vue的Scoped会使CSS选择器后加上一个中括号。
这并不是Vue独创的语法，而是属性选择器。.myWrapper[data-v-2fc5154c]代表选择拥有data-v-2fc5154c这个属性的、同时是myButton类的HTML元素。只有这个文件内部的HTML元素才会被打上data-v-2fc5154c这个属性。其余文件的HTML元素即使是myWrapper类，这个样式也不会对他生效。
回到相同的问题，假如Vue项目在使用了Scoped做样式隔离，我们用于覆盖的样式也会加上属性选择器，但是UI组件内部的HTML元素都没有该属性。
所以Vue提供了一个类似的语法：深度作用选择器。
使用很简单，把要“渗透“进组件内部的样式前面加上，作用域内的CSS样式都不会带上哈希值作为属性选择器。
<style scoped>
.myWrapper>>>
.ant-picker-calendar-full
.ant-picker-panel
.ant-picker-calendar-date-today{
border-color:purple
}
</style>
<template>
<div class="myWrapper" >
<Calendar />
</div>
</template>Copier après la connexion
编译后
<style>
.myWrapper[data-v-2fc5154c]
.ant-picker-calendar-full
.ant-picker-panel
/* 作用域内的CSS都没有带上属性选择器 */
.ant-picker-calendar-date-today {
border-color:purple
}
</style>
<div class="myWrapper" data-v-2fc5154c>
<div class="ant-picker-calendar-full" data-v-2fc5154c>
<div class="ant-picker-date-panel">
<td class="ant-picker-cell-today"></td>
</div>
</div>
</div>Copier après la connexion
借助深度作用选择器，可以将要用于覆盖CSS“渗透”进组件内部。
也可以将写成/deep/或者::v-deep。
相较于React的:global，Vue的深度作用选择器是一种更优秀的方案，它必须要一个前导（也就是上面例子中的.myWrapper选择器），前导依旧会被打上哈希值作为属性选择器，要渗透进去的样式实际上是作为它的子选择器，只在当前这个文件下生效，彻底避免造成全局污染。
结语
本文通过如何修改UI组件内部样式为切入点，分析了几种解法。了解了组合选择器的优先级分数累加，以及在实际React、Vue项目用到的样式隔离方案——CSS Module和Scoped的原理，最后是介绍了在样式隔离的情况下，如何使用:global和深度作用选择器做样式覆盖。
如果这篇文章对你有帮助，给我点个赞和在看吧～
（学习视频分享：web前端开发、编程基础视频）
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
