Vue recently developed a back-end management system, which uses a third-party element-ui ui component library. Component library used by people who know that there will always be a number of third-party components default style, while some is that we want to change.
First, the basic (learn <style> </ style> is scoped properties)
Vue in the process of writing code, in order to prevent parent component with the same style name selector settings affect the sub-components, we tend to give <style> </ style> tag set scoped attributes. However, if the scoped attribute is set, Css in the assembly can only act on the assembly of elements of the current.
In fact, it is achieved by using the following conversion PostCSS:
<template>
<div class="example">hi</div>
</template>
<style scoped>
.example {
color: red;
}
</style>
Convert:
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
Of course, we can also use mixed local and global style style:
<style>
/ * Global Style * /
</ style>
<style scoped>
/ * local style * /
</ style>
About styles subassembly root element of the result , but also individually recited it:
Using scoped the style parent element will not penetrate into the subassembly. However, a child of the root component scoped CSS will also affect the scoped CSS components and sub-assemblies of the affected parent. This is designed to allow a parent component can be from the perspective of the layout, adjust the style of its sub-components of the root element.
Second, the problem (modify the default style when using third-party component library)
Next, introduce and solve some problems encountered when using third-party component libraries - not modify the default style .
Use element-ui component library in the project, when you set the style found it impossible to override the default style, first I thought it was the selector of weight problems, it was discovered that no matter how add class name, the style could not be effective. Now we offer the following solutions :
Use depth acting selector : If you want scoped the style of a selector can act get "deeper", for example influence subassembly, you can use the >>> operator:
<style scoped>
II.A >>> .B {
/ * set to the required style subassembly b * /
Color: Red;
}
</ style>
The code will be compiled into:
II.A [Data-V-f3f3eg9] .B {
/ * set to the required style subassembly b * /
Color: Red;
}
However, some can not be resolved correctly as a preprocessor like Sass >>>. In this case you can use /deep/ or ::v-deep operator instead - both >>> alias, can also work.
<style scoped>
II.A / Deep / .B {
/ * set to the required style subassembly b * /
Color: Red;
}
</ style>
If you use the above / deep / find patterns still not entered into force, then give it again a highest weight (important!):
<style scoped>
II.A / Deep / .B {
/ * set to the required style subassembly b * /
Color:! Red Important;
}
</ style>