1. Style Modularization
In the css single file, we write the style of the component in the style tag. You can see that the general style tag will carry a scoped attribute, so that the selectors of different components can be the same in time, but the styles do not interfere with each other.
Looking at an example, we define a class in both components hello-world-boxand set different styles in the corresponding scope tags.
As you can see, vue adds one to our tags in different components 独有的属性（PostCSS转译实现）. Then use the attribute selector to realize that the label styles of different attributes do not interfere with each other.
The role of css attribute selectors is to set styles for HTML elements with specific attributes
.hello-world-box[data-v-e17ea971] {
color: red;
}
This is also the principle of style tag scoped attribute to realize style modularization.
When a style tag has a scoped attribute, its CSS style can only be applied to the current component, that is, the style can only be applied to the current component element. Through this attribute, the styles between components can be prevented from polluting each other. If all style tags in a project are scoped, it is equivalent to realizing the modularization of styles.
2. Realization of style penetration
After understanding the implementation of style modularization in vue, let's get to the point, how to customize the style of components in the elmentUI component library?
This is actually a relatively common requirement, because some UI diagrams are not drawn using the components of the element component library, so there must be deviations in the style.
Let's take a look at el-table and we
can see that the styles of element components are all implemented through external style files, so there are no attributes added by vue on the corresponding tags.
Then we directly add the style to the component using the elment component, it will not take effect, and the style file imported from the outside has a higher priority.
1. External css file
We can define a css file by ourselves, and then write the corresponding style to be modified.
For example: styles.css
is introduced in the entry file main.js:
here, pay attention to the order of importing the element css file and the custom css file, because the css style takes effect after the last come first.
It took effect.
But there is actually a problem with this: the style file affects all components, that is, we call this component in other pages, and the style is also modified.
One of the solutions is to add a custom class name on the upper layer of the package on the class corresponding to the component.
2、:deep()
:deep(): Change the location of private properties when css is parsed
.outer {
.el-input__inner {
// 此时css解析的为 .outer .el-input__inner[data-v-xxxx] 样式无效
background: pink;
}
:deep(.el-input__inner) {
// 此时css解析的为 .outer[data-v-xxxx] .el-input__inner 样式生效
background: red;
}
}
3、:slotted()
:slotted(): Define style slot content style in child component
By default, scoped styles do not affect <slot/>rendered content, as they are assumed to be held and passed in by the parent component.
<template>
<div>
<slot>插槽</slot>
</div>
</template>
<style lang="less" scoped>
:slotted(.red) {
color: red;
}
</style>
4、:global()
:global() : global selector, define the global style, no need to create an unscoped style separately.
<style scoped>
:global(.red-box) {
color: red;
}
</style>
<!-- 等效于 -->
<style>
.red-box{
color:red
}
</style>
5. Dynamic css (v-bind)
<style>The tag of the vue3 single-file component supports using v-bind CSS 函数to link the value of CSS to the dynamic one 组件状态, that is, we can introduce responsive variables in the script tag in the style tag:
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
</template>
<script lang="ts" setup>
import {
ref } from 'vue';
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
const redColor = ref('red')
</script>
<style scoped>
.el-table {
color: v-bind(redColor);
}
</style>
It can be seen that even in the style tag with scoped, the style penetration is also in effect.
The actual values are compiled into hashed CSS custom properties, so the CSS itself remains static. Custom properties are applied via inline styles 组件的根元素and are updated reactively when the source value changes.
Refer to vue official website: single file component CSS function