During the development process, we all know that adding the scoped attribute to the style tag in a component can prevent the style within the component from polluting the outside world. scoped can limit the scope of the style so that the style within the component becomes a local style, which only affects the current component. , but when we use third-party component libraries and public components, we sometimes need to make some style modifications to these components. Due to the limitations of scoped, our direct modification of component styles will not take effect. We usually solve the problem in the following ways:
1. Create a new unscoped style tag under the style tag of this scope to cover the component style;
2. Introduce an external style to index.html to cover the style;
3. Use the depth selector -----/deep/ to cover Subcomponent styles, such as /deep/ .class{style to be overridden};
小提示：深度选择器： /deep/ 和 “<<<" 二者其实作用是一样的，只是一些css预处理器，例如sass不能解析>>>属性，这种情况下可以用deep，它是>>>的别名，工作原理相同。
The first method is simple and crude, but it is not recommended because naming conflicts may cause other style abnormalities; the second
method is also more rigid and is not recommended;
the third method not only modifies the style of the subcomponent, but also does not It will pollute the global style, and it is recommended to use it, but what is its principle? Then let’s continue to take a look~~
First of all, when compiling a component, if there is a scoped attribute on the style tag in the current component, a [data-v-hash] attribute will be added to all tags in the current component, and added at the end of the css selector of the tag. The same field as the attribute plays a unique role and implements a function similar to "scope", so that the styles in the current component will only affect the elements in the current component.
Such as the following parent and child component code structure:
/*父组件结构*/
/*父组件里使用child子组件*/
<template>
<div class="father-div">
<span class="father-text">我是父组件</span>
<child />
</div>
</template>
<style lang="scss" scoped>
.father-div{
.father-text{
color:red;
}
}
</style>
/*子组件结构*/
<template>
<div class="child-div">
<span class="child-text">我是子组件</span>
</div>
</template>
<style lang="scss" scoped>
.child-div{
.child-text{
color:pink;
}
}
</style>
Since the style tag of the component has a scoped attribute, the browser will add a [data-v-hash] to all tags when parsing, and add the same field as the attribute at the end of the class selector, so when viewed in the browser The dom structure to the parent component is like this:
<div data-v-7fa1cbbc class="father-div" >
<span data-v-7fa1cbbc class="father-text">我是父组件</span>
</div>
The corresponding css style will also add fields with the same attributes after its selector:
.father-div[data-v-7fa1cbbc] {
width: 200px；
height: 20px;
}
.father-div .father-text[data-v-7fa1cbbc] {
color: red;
}
If the styles of both the parent component and the child component use the scoped attribute, the outermost label of the child component will be added with the hash value of the current component and the hash value of the parent component.
So the structure of the subcomponent parsed on the browser is like this:
<div data-v-384b136e data-v-7fa1cbbc class="child-div" >
<span data-v-384b136e class="child-text">我是子组件</span>
</div>
Now if you want to directly change the style of the span tag named child-text in the child component in the parent component, you will find that it is not easy to do:
/* 父组件的css样式 */
<style lang="scss" scoped>
.father-div{
.father-text{
color:red;
}
.child-div {
//直接修改
.child-text{
color: blue;
}
}
}
</style>
Because the style tag of the sub-component also has the scoped attribute, the sub-component element itself has its own style. The browser will parse the style of the component itself and render the corresponding DOM:
.child .child-text[data-v-384b136e] {
//类选择器的hash值只与子组件标签的hash值对应
color:pink
}
Obviously, the reason why direct modification does not work is because the style written in the parent component parses the hash value of the parent component, but the tag in the child component parsed on the browser adds the hash value of the child component, corresponding to The style in the child component does not correspond to the hash value in the parent component, so the style override in the parent component does not take effect.
Therefore, the style of the subcomponent itself is still displayed on the page:
So now back to what we said at the beginning, this can be solved by adding a style tag without the scoped attribute , but this method is simple and crude, and there may be something wrong with it. Other styles are affected, so we can use the depth selector /deep/ to solve the problem :
Now if you want to modify the style of the subcomponent class named child-text, you can do this:
/* 父组件的css样式 */
<style lang="scss" scoped>
.father-div{
.father-text{
color:red;
}
/deep/ .child-div {
//使用深度选择器修改
.child-text{
color: blue;
}
}
}
</style>
Because when the browser encounters "/deep/" when parsing, it will replace the position of "/deep/" with the hash value of the component, that is:
.father-div[data-v-7fa1cbbc] .child-div .child-text{
color: blue;
}
In this way, you only need to pay attention to the weight of the css to override the style in the subcomponent, and the style we want will be displayed on the page.
At this point you will see that the font color of the subcomponent has changed to the blue we want:
A little tip at the end: If you just want to modify the style of the outermost structure of the subcomponent, you can override the style in the parent component without /deep/, because the outermost label in the subcomponent contains the parent and child components. Two hash values, so its style can be directly defined in both the parent component and the child component.