What is scoped?
On vue file style label, there is a special property: scoped. When a style tag has scoped attributes, CSS styles it can only operate on the current assembly, that is to say, the style is only applicable to the current component elements. By this attribute, the style can be made between the components does not contaminate each other. If all style tags in a project all added scoped, equivalent to achieve a modular style.
The principle of scoped
Effect scoped attribute vue mainly by PostCSS translation achieved,
The following is a front translational vue code:
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>After the translation:
<style>
.example[data-v-5558831a] {
color: red;
}
</style>
<template>
<div class="example" data-v-5558831a>hi</div>
</template>Namely: PostCSS a dom to all components adds a unique dynamic properties, then, to add an additional CSS selectors corresponding attribute selector selects the assembly dom, this approach makes the style to act only on the properties comprising dom-- components of internal DOM.
Why do I need to penetrate scoped?
I scoped beautiful to look at, but, in many projects, there will be such a situation, namely: quote third-party components, you need to modify the local third-party components in a component style, but do not want to remove scoped property caused between components style pollution. At this time only by a special way, to penetrate scoped .
<style scoped>
外层 >>> 第三方组件 {
样式
}
</style>For example, the actual code (I used here is the component name elementui third-party component libraries):
<style scoped>
/* .footerContainer是父级容器 .el-table--border td 是elementui自己封装的名字 */
.footerContainer >>> .el-table--border td {
border-right: none;
}
.footerContainer .screen_configuration_el-table th {
background-color: #eff2f7 !important;
border-left: none !important;
color: black !important;
}
.footerContainer >>> .el-table--border {
border: 1px solid #ebeef5;
border-left: none;
border-right: none;
}
</style>By >>> be scoped in the case where such property, penetrating scoped, modify the value of other components.
Another way is to redistribute -> Global style css -> Quxianjiuguo method
In fact, also has a method Quxianjiuguo, i.e. the definition of a label containing a style attribute scoped outside, and then define a label that does not contain scoped style attributes, i.e., to define a global style tags in a vue assembly, comprising a scope of style tags:
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>At this point, you only need to modify the third-party style css to write in a style in the first.
Note specific region:
If you use >>> scoped penetrate selector can no longer add style above less sass scss otherwise error.
As shown below:
