When I was writing a project these days, I needed to modify part of the style of Element UI according to the requirements, but it did not take effect when I directly modified the style in the component. Later, WHEN I checked online materials, I found that the modification could not take effect because scoped was limited to the current component. Here I paste a paragraph referring to the content searched online in case I forget it later

In vue components we often need to add style scoped to make the current style apply only to the node of the current component. After adding scoped, what vue is actually doing behind the scenes is adding a unique attribute like “data-V-1233” to the node of the current component, and of course [data-V-1233] to all styles of the current style so that the current style only applies to the node of the current component.

The depth selector of the CSS

If you cannot style a third-party UI component library component after scoped, you can use CSS Depth selector to style the component.

Example: In vue projects, component libraries such as elementUI are often needed. Some styles cannot be modified directly in the component because scoped is limited to the current component, and removing scoped will affect the global style. For this, you can use a depth-acting selector (that is, style penetration).

The specific use

1. If the project uses CSS native styles, you can use >>> to penetrate the changes directly

style scoped>
	/* Before compiling */
	#test >>> .el-checkbox__label{ color: red; }
	
	/* After compiling */
	#test[data-v-f3f3eg9] .el-checkbox__label {color:red; }
</style>
Copy the code

2. The SCSS, SASS, less operators >>> used in the project may fail to compile. You can use /deep/

Note: VuE-CLI3 or later is not acceptable

<style lang="scss" scoped>
/ * 1 * /
.a {
 /deep/ .b {  color:red; }}The usage / * 2 * /
.a /deep/ .b { color:red; }
</style>
Copy the code

3, if the use of preprocessor can use :: V-deep

<style lang="scss" scoped>
/ * 1 * /
.a{
 ::v-deep .b { color:red; }}The usage / * 2 * /
.a ::v-deep .b { color:red; } </style>Copy the code