修改 element-ui 默认样式的两种方法

1. 去掉scoped，通过父类命名空间划分作用域

首先，按下F12找到我们需要修改样式 DOM 对应的 class ;

然后，在原有的 ​​style​​ 标签后，新建一对​​style​​ 标签并去掉 ​​scoped​​ 属性；（一个vue文件允许多对​​style​​ 标签）

并在新建的​​style​​ 标签中，修改element-ui 默认样式；

就像这样👇

<style scoped lang="less">
// 在此处编写组件样式
</style>

<style lang="less">
// 在此处修改 element-ui 默认样式
</style>

这时小伙伴们可能有疑问了，新建的​​style​​ 标签没有 ​​scoped​​ 划分作用域，那不影响全局的默认样式了吗？

那么，重点来了；

我们可以在外面包上一层DOM并加上class，给我们修改的默认样式加上一个父类；

这样我们就可以通过父类对作用域进行划分；

就像这样👇，我们就可以修改 element-ui 默认样式啦！😉

<template>
    <!-- 样式命名空间 -->
    <div class="myClass">
        <!-- element-ui 组件 -->
    </div>
</template>
<style scoped lang="less">
// 在此处编写组件样式
</style>

<style lang="less">
// 用父类划分作用域
.myClass {
    // 在此处修改 element-ui 默认样式
}
</style>

**注意：

1. 我们是通过父类进行划分作用域的，所以多个vue组件的父类不能重名哦！** 😂😂😂
2. 注意 append-to-body 属性，当​​append-to-body = true​​ 时，我们添加的父类，将不是“真正的父类”，样式将失效 😥😥😥

2. 深度选择器 ​​/deep/​​穿透作用域

使用深度选择器 ​​/deep/​​进行作用域穿透，不需要去掉​​style​​ 标签 ​​scoped​​ 属性。只需要在父类class下的element-ui组件class前加上​​/deep/​​，就可以修改默认样式😀😀😀

就像这样👇

<style scoped lang="less">
.myClass {
    /deep/ .el-dialog{
        background-color: #33FF00;
    }
}
</style>

代码示例，仅供参考

<template>
    <!-- 样式命名空间 -->
    <div class="myClass">
        <el-button type="text" @click="centerDialogVisible = true">修改后的element-ui样式</el-button>

        <el-dialog
            v-model="centerDialogVisible"
            title="修改后的element-ui样式"
            width="30%"
            center
        >
            <span>修改后的element-ui样式</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="centerDialogVisible = false">
                        Confirm
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    return {
        centerDialogVisible: ref(false),
    }
  },
})
</script>

// 方法一： 去掉scoped，通过父类命名空间划分作用域
<style scoped lang="less">
// 在此处编写组件样式
</style>

<style lang="less">
// 用父类划分作用域
.myClass {
    // 在此处修改 element-ui 默认样式
    .el-dialog{
        background-color: #33FF00;
    }
}

// 方法二： 深度选择器 /deep/穿透作用域
<style scoped lang="less">
.myClass {
    /deep/ .el-dialog{
        background-color: #33FF00;
    }
}
</style>