修改 element-ui 默认样式的两种方法
修改 element-ui 默认样式的方法有好几种,今天我来分享一下我最常用的方法;首先,我们按F12找到我们要修改样式 DOM 对应的 class ;然后,在原有的 style 标签后,新建一对style 标签并去掉 scoped 属性;并在新建的style 标签中,修改element-ui 默认样式;就像这样????<style scoped lang="less">// 在此处编
·
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>
**注意:
- 我们是通过父类进行划分作用域的,所以多个vue组件的父类不能重名哦!** 😂😂😂
- 注意 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>
更多推荐
已为社区贡献5条内容
所有评论(0)