


How to override component library styles? A brief analysis of solutions to React and Vue projects
How to override component library styles? The following article will introduce to you how to elegantly override component library styles in React and Vue projects. I hope it will be helpful to you!
The style of the component library cannot be overwritten. This should be a problem that many front-ends have encountered in their work. Today we will analyze the reasons based on actual cases, and finally give the optimal solutions in React and Vue projects.
This article will explain clearly:
What is the principle of CSS Module in React? What does
:global
do?What is the principle of Scoped in Vue? What is a depth action selector? (Learning video sharing: vue video tutorial)
Let’s not talk about the concept first, and start directly from the needs: I used the Antd component library to display a calendar.
Now I want to change the blue border above the current date to purple.
You can try to see if you can achieve it.
Whether it is React or Vue, the entire Calendar is encapsulated. We cannot simply add style/class outside the component to change the internal style.
import { Calendar } from 'antd'; ... <div className="myWrapper"> <Calendar class="custom"/> </div>
Locate the style to be overwritten
First use the developer tools to locate the corresponding style: .ant-picker-calendar-date-today
, this is what we want to modify.
.ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-today { border-color: #1890ff; }
Those who are familiar with webpack should know that the imported CSS files will eventually be processed by style-loader. Simply put, its function is to package the CSS file, place it in the style tag, and finally insert it into HTML as an internal style sheet. This is done whether it is the style of the component library or the custom style we wrote.
We need to introduce the styles of the component library before the custom styles, so that the custom styles can have a higher priority.
Modify the source file
The simplest and crudest method is to directly change the CSS source code of the component library. Open the node_modules folder of your project, click on it layer by layer, find the corresponding style file, and modify it according to your needs.
It is indeed feasible to handle personal projects in this way, but when working in a team, it is more troublesome to synchronize other people's local node_modules, and it can only be regarded as a 60 decomposition method.
Global CSS file
As mentioned before, putting your own CSS files behind the styles of the component library can ensure higher customization priority. As long as you rewrite the style with the same name, you can theoretically implement an override group.
But this? The processing will find that it does not work:
/* 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> ...
Because this also involves the priority of the CSS combination selector.
The basic priority should go without saying: !important>Inline style>ID selector>Class selector>Tag selector
. (!important hacks like this will make the project difficult to maintain and are not recommended for use)
On this basis, there are five combination selectors that need to accumulate priority scores. Take the class selector as an example:
Descendant selector (space):
.A .B
Selects all .B elements after the .A element,Child element selector (greater than sign):
.A>.B
selects the .B element among the direct descendants of the .A elementadjacent sibling selector (plus Number):
.A .B
Select the first sibling .B element immediately after the .A element- ## Subsequent sibling selector (~ number):
.A~.B
Select all sibling .B elements after .A element
- Intersection selector (connected together):
.A.B
Select itself at the same time Elements with two attributes, .A and .B
.ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-today { border-color: #1890ff; }If the priority score of a class selector is 10 points, then the three formed descendant selectors will be 30 points. And the custom style only has 10 points, so even if it is introduced later, it cannot be successfully overwritten.
.ant-picker-calendar-date-today { border-color: purple; // 覆盖为紫色 }You need to completely rewrite the entire selector to achieve the desired effect.
One thing to add here is that it is also a combination selector, but the priority of the union selector (comma) is not cumulative:.A, .B
Select the .A or .B element ( Can be comma space)
样式隔离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和深度作用选择器做样式覆盖。
如果这篇文章对你有帮助,给我点个赞和在看吧~
The above is the detailed content of How to override component library styles? A brief analysis of solutions to React and Vue projects. For more information, please follow other related articles on the PHP Chinese website!

Vue.js and React each have their own advantages, and the choice should be based on project requirements and team technology stack. 1. Vue.js is community-friendly, providing rich learning resources, and the ecosystem includes official tools such as VueRouter, which are supported by the official team and the community. 2. The React community is biased towards enterprise applications, with a strong ecosystem, and supports provided by Facebook and its community, and has frequent updates.

Netflix uses React to enhance user experience. 1) React's componentized features help Netflix split complex UI into manageable modules. 2) Virtual DOM optimizes UI updates and improves performance. 3) Combining Redux and GraphQL, Netflix efficiently manages application status and data flow.

Vue.js is a front-end framework, and the back-end framework is used to handle server-side logic. 1) Vue.js focuses on building user interfaces and simplifies development through componentized and responsive data binding. 2) Back-end frameworks such as Express and Django handle HTTP requests, database operations and business logic, and run on the server.

Vue.js is closely integrated with the front-end technology stack to improve development efficiency and user experience. 1) Construction tools: Integrate with Webpack and Rollup to achieve modular development. 2) State management: Integrate with Vuex to manage complex application status. 3) Routing: Integrate with VueRouter to realize single-page application routing. 4) CSS preprocessor: supports Sass and Less to improve style development efficiency.

Netflix chose React to build its user interface because React's component design and virtual DOM mechanism can efficiently handle complex interfaces and frequent updates. 1) Component-based design allows Netflix to break down the interface into manageable widgets, improving development efficiency and code maintainability. 2) The virtual DOM mechanism ensures the smoothness and high performance of the Netflix user interface by minimizing DOM operations.

Vue.js is loved by developers because it is easy to use and powerful. 1) Its responsive data binding system automatically updates the view. 2) The component system improves the reusability and maintainability of the code. 3) Computing properties and listeners enhance the readability and performance of the code. 4) Using VueDevtools and checking for console errors are common debugging techniques. 5) Performance optimization includes the use of key attributes, computed attributes and keep-alive components. 6) Best practices include clear component naming, the use of single-file components and the rational use of life cycle hooks.

Vue.js is a progressive JavaScript framework suitable for building efficient and maintainable front-end applications. Its key features include: 1. Responsive data binding, 2. Component development, 3. Virtual DOM. Through these features, Vue.js simplifies the development process, improves application performance and maintainability, making it very popular in modern web development.

Vue.js and React each have their own advantages and disadvantages, and the choice depends on project requirements and team conditions. 1) Vue.js is suitable for small projects and beginners because of its simplicity and easy to use; 2) React is suitable for large projects and complex UIs because of its rich ecosystem and component design.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

SublimeText3 English version
Recommended: Win version, supports code prompts!

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Dreamweaver Mac version
Visual web development tools

Notepad++7.3.1
Easy-to-use and free code editor

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
