How to use style penetration to modify elementUI default style in vue3 project

1. Style modularization

In a single css file, we write the style of the component in the style tag. You can see that generally the style tag will have a scoped attribute, so that different components can be realized in real time. The selectors are the same, but the styles do not interfere with each other.

Look at an example. We define a hello-world-box class in both components and set different values ​​in the corresponding scope tags. style.

As you can see, vue adds a unique attribute (PostCSS translation implementation) to the labels in different components. Then, through the attribute selector, the label styles of different attributes do not interfere with each other.

The function of the css attribute selector 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 achieve 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 contaminating each other. If all style tags in a project are scoped, it is equivalent to realizing style modularization.

2. Style penetration implementation

After understanding the implementation of style modularization in vue, let’s get to the point. How to customize the style of the components in the elementUI component library?
This is actually a relatively common requirement, because some UI diagrams are not drawn using components from the element component library, so there must be deviations in the style.
Let’s take a look at el-table

As you can see, the styles of element components are implemented through external style files, so there is no vue on the corresponding label added attributes.
Then if we directly add styles to components using element components, it will not take effect. Externally imported style files have higher priority.

1. External css file

We can define a css file ourselves, and then write the corresponding style to be modified.
For example: styles.css

Introduced in the entry file main.js:

Pay attention to the introduction here The order in which element css files and custom css files are introduced, because css styles take effect first.

It took effect.
But there is actually a problem with this: the style file affects all components, that is, when we call this component in other pages, the style is also modified.
One of the solutions is to add a custom class name to the class corresponding to the component.

2, :deep()

:deep(): Change the position of private attributes 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 the style slot content style in the sub-component

By default, the scope style will not affect <slot></slot> Rendered content, because they are considered 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, defining global style without opening an unscoped style.

<style scoped>
:global(.red-box) {
	color: red;
}
</style>
<!-- 等效于 -->
<style>
 .red-box{
     color:red
 }
</style>

5. Dynamic css (v-bind)

The <style></style> tag of vue3 single file component supports the use of v-bind CSS functionLink the CSS value to the dynamic component state, that is, we can introduce the responsive variable in the script tag in the style tag:

<template>
    <el-table :data="tableData" >
        <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 &#39;vue&#39;;

const tableData = [
    {
        date: &#39;2016-05-03&#39;,
        name: &#39;Tom&#39;,
        address: &#39;No. 189, Grove St, Los Angeles&#39;,
    },
    {
        date: &#39;2016-05-02&#39;,
        name: &#39;Tom&#39;,
        address: &#39;No. 189, Grove St, Los Angeles&#39;,
    },
    {
        date: &#39;2016-05-04&#39;,
        name: &#39;Tom&#39;,
        address: &#39;No. 189, Grove St, Los Angeles&#39;,
    },
    {
        date: &#39;2016-05-01&#39;,
        name: &#39;Tom&#39;,
        address: &#39;No. 189, Grove St, Los Angeles&#39;,
    },
]

const redColor = ref(&#39;red&#39;)

</script>

<style scoped>
.el-table {
    color: v-bind(redColor);
}
</style>

You can see that even in scoped style tags, style penetration takes effect.

The actual values ​​are compiled into hashed CSS custom properties, so the CSS itself remains static. Custom attributes will be applied to the root element of the component through inline styles, and will be updated responsively when the source value changes.

The above is the detailed content of How to use style penetration to modify elementUI default style in vue3 project. For more information, please follow other related articles on the PHP Chinese website!