在开发中我们发现修改elementUI样式的时候,添加了scoped的组件修改样式是无效的。
首先我们要了解一下scoped是什么?
官网是这样说的:
当< style >标签有scoped属性时,他的css只作用于当前组件的元素。
使用scoped后,父组件的样式不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的scoped CSS和子组件的scoped
CSS的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。
由于element的样式是全局引入的,所以你想在某个页面里面覆盖他的样式就不能加scoped。
方法一:
style中不加scoped,但是直接写在全局样式里,会污染全局样式,但是如果需要全局使用这个样式,可以写一个通用的样式全局使用
如果你只想覆盖单个页面element的样式,就需要使用下面的方法
方法二: 不加scoped的情况下,可以给他的父级元素加一个class,用命名空间来解决问题
代码如下
<style lang="scss">
.ship-select { // 父级元素
height: 30px;
margin-left: 20px;
.el-select {
height: 30px;
.el-input__icon {
line-height: 30px;
}
.el-input,
.el-input--suffix .el-input__inner {
height: 30px;
}
}
}
方法三: 在style标签加scoped的情况下,使用深度选择器(推荐)
如果是sass/less的话可能无法识别。在这些情况下,你可以使用/deep/ 或者 v-deep来样式穿透
代码如下:
<style lang="scss" scoped>
.change-ship {
position: relative;
.ship-select {
height: 30px;
margin-left: 20px;
// 深度选择器
/deep/ .el-select {
height: 30px;
.el-input__icon {
line-height: 30px;
}
.el-input,
.el-input--suffix .el-input__inner {
height: 30px;
}
}
}
}
</style>
注意/deep/ 后面要有空格,不然样式穿透不会生效。