elementui原生属性_在vue中使用深度选择器修改element-ui的原生样式

在很多情况下，我们需要修改 element-ui 提供的原生样式，来满足项目的需求

然而 常规的CSS写法可能不会生效

因为当我们在源代码中引用 标签时，实际上 浏览器可能会渲染出好几个对应的 class

例如：

引用 时

浏览器会渲染出如下的DOM结构：

白色

在修改样式之前，我们必须先弄清楚元素之间的层级关系

下面介绍2种修改 element-ui 原生样式的方法

方法一：

在原有的 style scoped 标签外部，新建一个不带scoped的style标签

/// 修改单选按钮的样式

.el-radio-button__inner {

height: .6rem;

padding: .16rem .2rem;

margin-right: .25rem;

border: 1px solid #FFFFFF;

border-radius: .4rem;

background: #F0F0F0;

}

但是这种方法会导致 el-radio-button__inner的样式 渗透到子组件中

很有可能会影响后续的开发和维护

方法二：使用深度选择器

例如：我们想修改按钮被点击之后的样式

选中某个按钮后，F12打开浏览器开发者工具

发现 按钮被选中后 作用的样式写在这个类名之下

此时我们就可以使用 /deep/ 前缀 通过深度选择器 来“穿透”这个样式

/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {

color: #FF3333;

border-color: #FF3333;

box-shadow: none;

}

这样，我们就能够在不污染其他组件的情况下，按照自己的需求 修改element-ui的原生样式了