Wie überschreibe ich Komponentenbibliotheksstile? Eine kurze Analyse der Lösungen für React- und Vue-Projekte

Wie überschreibe ich Komponentenbibliotheksstile? Im folgenden Artikel erfahren Sie, wie Sie Komponentenbibliotheksstile in React- und Vue-Projekten elegant überschreiben können.

Die Stile der Komponentenbibliothek können nicht überschrieben werden. Dies sollte ein Problem sein, auf das viele Frontends bei ihrer Arbeit gestoßen sind. Heute werden wir die Gründe anhand tatsächlicher Fälle analysieren und schließlich die optimalen Lösungen in React- und Vue-Projekten angeben.

In diesem Artikel wird klar erklärt:

• Was ist das Prinzip des CSS-Moduls in React? Was macht :global? :global是做什么的？

• Vue中Scoped的原理是什么？深度作用选择器是什么？（学习视频分享：vue视频教程）

先不讲概念，直接从需求出发：我使用了Antd组件库来展示一个日历。

现在我想将当前日期上面的蓝色边框变成紫色。

可以试试你能不能实现。

不管是React还是Vue，整个Calendar是被封装起来的，我们没有办法在组件外简单加上style/class改动内部的样式。

import { Calendar } from 'antd';
...
<div className="myWrapper">
  <Calendar class="custom"/>
</div>

定位要覆盖的样式

---

首先用开发者工具定位对应的样式：.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文件

---

之前提到，把自己写的的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';
...
<div className="myWrapper">
  <Calendar />
</div>
...

因为这里还涉及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

🎜Was ist das Prinzip von Scoped in Vue? Was ist ein Tiefenwirkungsselektor? (Teilen von Lernvideos: vue Video Tutorial🎜)🎜🎜Lassen Sie uns nicht zuerst über das Konzept sprechen, sondern direkt mit den Anforderungen beginnen: Ich habe die Antd-Komponentenbibliothek verwendet, um einen Kalender anzuzeigen. 🎜🎜🎜🎜Jetzt Ich möchte den blauen Rand über dem aktuellen Datum in Lila ändern. 🎜🎜Sie können versuchen, herauszufinden, ob Sie es erreichen können. 🎜🎜Ob React oder Vue, der gesamte Kalender ist gekapselt. Wir können nicht einfach Stil/Klasse außerhalb der Komponente hinzufügen, um den internen Stil zu ändern. 🎜

// src/Demo.js
import styles from './demo.module.css';
export default function Demo() {
  return (
    <div className={styles.myWrapper}>
      <Calendar />
    </div>
  );
}

Suchen Sie den Stil, der überschrieben werden soll

---

🎜Verwenden Sie zunächst die Entwicklertools, um den entsprechenden Stil zu suchen: .ant-picker-calendar-date- Heute ist es das, was wir ändern wollen. <br>🎜🎜<img src="https://img.php.cn/upload/image/101/753/234/1652670415522180.png" title="1652670415522180.png" alt="Wie überschreibe ich Komponentenbibliotheksstile? Eine kurze Analyse der Lösungen für React- und Vue-Projekte">🎜<pre class="brush:js;toolbar:false;">/* src/demo.module.css */ .myWrapper { border: 5px solid black; }</pre>🎜Wer sich mit Webpack auskennt, sollte wissen, dass die importierten CSS-Dateien schließlich vom Style-Loader verarbeitet werden. Einfach ausgedrückt besteht seine Funktion darin, die CSS-Datei zu packen, sie im Style-Tag zu platzieren und sie schließlich als internes Stylesheet in HTML einzufügen. Dies geschieht unabhängig davon, ob es sich um den Stil der Komponentenbibliothek oder den von uns geschriebenen benutzerdefinierten Stil handelt. 🎜🎜<img src="https://img.php.cn/upload/image/480/863/763/1652670424615390.png" title="1652670424615390.png" alt="Wie überschreibe ich Komponentenbibliotheksstile? Eine kurze Analyse der Lösungen für React- und Vue-Projekte">🎜🎜uns Die Stile der Komponentenbibliothek sollten vor den benutzerdefinierten Stilen eingeführt werden, damit die benutzerdefinierten Stile eine höhere Priorität haben können. 🎜<h2><strong>Quelldateien ändern</strong></h2> <hr>🎜 Das direkte Ändern des CSS-Quellcodes der Komponentenbibliothek ist die einfachste und gröbste Methode. Öffnen Sie den Ordner „node_modules“ Ihres Projekts, klicken Sie Schicht für Schicht darauf, suchen Sie die entsprechende Stildatei und ändern Sie sie entsprechend Ihren Anforderungen. <br>🎜🎜Es ist zwar möglich, persönliche Projekte auf diese Weise abzuwickeln, aber bei der Arbeit im Team ist es schwieriger, die lokalen node_modules anderer Leute zu synchronisieren, und es kann nur als 60-Zerlegungsmethode betrachtet werden. 🎜<h2><strong>Globale CSS-Dateien</strong></h2> <hr>🎜Wie bereits erwähnt, kann das Einfügen eigener CSS-Dateien hinter die Stile der Komponentenbibliothek sicherstellen, dass Anpassungen eine höhere Prioritätsklasse haben. Solange Sie den Stil mit demselben Namen neu schreiben, können Sie theoretisch eine Überschreibungsgruppe implementieren. <br>🎜🎜Aber das? Die Verarbeitung wird feststellen, dass es nicht funktioniert: 🎜<pre class="brush:js;toolbar:false;">&lt;style&gt; .demo_myWrapper__Hd9Qg { border: 5px solid black; } &lt;/style&gt; &lt;div class=&quot;demo_myWrapper__Hd9Qg&quot;&gt; ... &lt;/div&gt;</pre>rreee🎜Weil auch die Priorität des CSS-Kombinationsselektors eine Rolle spielt. 🎜🎜Die Grundpriorität sollte selbstverständlich sein: <code>!important>Inline Styles>ID Selector>Class Selector>Tag Selector. (!wichtig Diese Art von Hack erschwert die Wartung des Projekts und wird nicht zur Verwendung empfohlen.) 🎜🎜Auf dieser Grundlage müssen fünf Kombinationsselektoren akkumuliert werden. Nehmen Sie als Beispiel den Klassenselektor 🎜Nachkommen-Selektor (Leerzeichen): .A .B Wählt alle .B-Elemente nach dem .A-Element aus, 🎜🎜🎜Unterelement-Selektor (Größer-als-Zeichen): . A> .BWählt .B-Elemente unter den direkten Nachkommen von .A-Elementen aus🎜🎜🎜Angrenzender Geschwisterselektor (Pluszeichen): .A+.BWählt .A-Elemente aus erstes sibling.B-Element unmittelbar nach 🎜🎜🎜 Nachfolgender Geschwisterselektor (~ Nummer): .A~.B wählt alle sibling.B-Elemente nach dem A-Element aus🎜 🎜 🎜Schnittpunktselektor (miteinander verbunden): .A.B wählt Elemente aus, die sowohl .A- als auch .B-Attribute haben🎜🎜Die obige Regel mag kompliziert erscheinen, ist aber die praktischste Einer ist der erste Nachkommenselektor. Die Antd-Komponentenbibliothek verwendet es: 🎜

:global(.ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-today) {
  border-color:purple; /* 覆盖为紫色 */
}

🎜Wenn die Prioritätsbewertung eines Klassenselektors 10 Punkte beträgt, betragen die drei gebildeten Nachkommenselektoren 30 Punkte. 🎜🎜Und der benutzerdefinierte Stil hat nur 10 Punkte, sodass er selbst bei einer späteren Einführung nicht erfolgreich abgedeckt werden kann. 🎜

:global {
  .ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-today {
    border-color:purple;
  }
}

🎜Sie müssen den gesamten Selektor komplett neu schreiben, um den gewünschten Effekt zu erzielen. 🎜

🎜Eine Sache, die hier hinzugefügt werden muss, ist, dass es sich auch um einen Kombinationsselektor handelt, die Priorität des Vereinigungsselektors (Komma) jedoch nicht kumulativ ist: .A, .B wählt .A oder . B-Elemente (kann Komma + Leerzeichen sein)🎜

样式隔离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>
  );
}

/* src/demo.module.css */
.myWrapper {
  border: 5px solid black;
}

被编译后?，插入的样式表和元素的class属性都会加上一个哈希值作为命名空间。

<style>
.demo_myWrapper__Hd9Qg {
  border: 5px solid black;
}
</style>
<div class="demo_myWrapper__Hd9Qg">
...
</div>

可以看到，原本的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; /* 覆盖为紫色 */
}

SCSS或SASS中，还可以使用嵌套语法：

:global {
  .ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-today {
    border-color:purple;
  }
}

最后编译出来的代码如下：

/* 加上了哈希*/
.demo_myWrapper__Hd9Qg {
  border: 5px solid black;
}
/* :global作用域下都不会加上哈希*/
.ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-today {
  border-color:purple;
}

借助:global语法，即使使用CSS Module进行样式隔离也可以如愿实现覆盖功能。

Vue中的Scoped

Vue中也有类似的样式隔离功能，使用Scoped标记CSS部分，使用也很简单?：

<style scoped>
.myWrapper{
  border: 5px solid black
}
</style>
...
<div class="myWrapper" >
  <Calendar />
</div>
...

编译出来的代码如下：

<style>
.myWrapper[data-v-2fc5154c] {
  border: 5px solid black
}
</style>
<div class="myWrapper" data-v-2fc5154c>
  ...
</div>

可以看到，它的原理和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>

编译后

<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>

借助深度作用选择器，可以将要用于覆盖CSS“渗透”进组件内部。

也可以将写成/deep/或者::v-deep。

相较于React的:global，Vue的深度作用选择器是一种更优秀的方案，它必须要一个前导（也就是上面例子中的.myWrapper选择器），前导依旧会被打上哈希值作为属性选择器，要渗透进去的样式实际上是作为它的子选择器，只在当前这个文件下生效，彻底避免造成全局污染。

结语

本文通过如何修改UI组件内部样式为切入点，分析了几种解法。了解了组合选择器的优先级分数累加，以及在实际React、Vue项目用到的样式隔离方案——CSS Module和Scoped的原理，最后是介绍了在样式隔离的情况下，如何使用:global和深度作用选择器做样式覆盖。

如果这篇文章对你有帮助，给我点个赞和在看吧～

（学习视频分享：web前端开发、编程基础视频）

Das obige ist der detaillierte Inhalt vonWie überschreibe ich Komponentenbibliotheksstile? Eine kurze Analyse der Lösungen für React- und Vue-Projekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!