如何优雅的修改ElementUI的默认样式

花鸟风月KD
3,250 阅读2分钟

写在前面

使用elementui时总会被修改默认的样式所困扰，有时候想对其进行修改，又会发现其中结构层层嵌套。常常出现修改的样式无效，亦或一不小心造成了样式污染，别的地方的组件奇怪的崩掉，非常费时费力。在查看网上的各种解决方法后，自己也将其归纳一下，以便日后工作免受其扰。

使用全局样式

一般来说很多需求组件都是根据elementui微调得到的，可能只是换了个边框颜色，去除/增加了部分布局样式。同时此类组件又被大量的复用，比如按钮、输入框、下拉框等等，那么最好的解决方法还是在assets/style目录下新建一个elementui-style-cover.scss文件

elementui-style-cover.scss

$font-2: .2rem
$font-4: .4rem
$font-8: .8rem
$background-color-theme: #4D54D6;  //背景主题颜色1
$background-color-theme1: #ebebff;  //背景主题颜色2
$primary-btn-color:#3d66e4;  //默认按钮颜色

//修改默认按钮样式
.el-button {
    color: red;
    background-color: $background-color-theme;
    height: 0.32rem;
    padding: 0 0.2rem;
    min-width: 1.14rem;
    font-size: $font-2;
}
.el-button:hover {
    color: white;
    background-color: $background-color-theme1;
}
//修改checkbox样式
.el-checkbox__inner{ 
    border: 1px solid #C0C0C0 ; 
    width: 16px; 
    height: 16px; 
    border-radius: 0; 
}

使用# /deep/和>>>和::v-deep

使用前注意：css能使用/deep/和>>> (/deep/的别名)，les只能使用/deep/.

vue3.0中/deep/可能会报错，可以使用::V-deep，基本无区别。

.conBox /deep/ .el-input__inner{
    padding:0 10px;
}

.conBox ::v-deep .el-input__inner{
    padding:0 10px;
}

本质上，我们会给style标签添加scoped属性避免组件内样式对外界造成污染，scoped使得组件内的样式变成局域样式，只作用于当前组件。编译组件的时候，如果当前组件内style标签上有scoped属性，那么会在当前所有标签上添加一个【data-v-hash】属性，而当前样式表内的所有末尾选择器后面也会加上该属性，那么久使得当前组件内的样式只会作用于当前组件内的元素，例如：<div data-v-573e05f4></div>

但是在使用了别人的组件时，有时候修改一处就可能影响到别的地方，所以就需要有一个方法或者方式，既不影响到别的地方，又能修改子组件在当前的样式，那么就可以使用深度选择器/deep/

<style scoped> 

    //语法
    当前 /deep/ 组件（第三方） { 
        // 样式 ... 
    } 
    
    #form /deep/ .el-button{ 
        background: red; 
    }
    或者
    #form >>> .el-button{ 
        background: red; 
    } 
</style>

同时，可能会遇到vue样式中设置了scoped却无效的情况

将
<style scoped>
	@import './index.css';
</style>
换成
<style src="./index.css" scoped></style>

文章部分参考juejin.cn/post/701101…

avatar
文章
阅读
粉丝