elementUI中覆盖原有组件样式写法

为了vue页面样式模块化,不对全局造成污染,建议每个页面的style标签加上scoped,表示他的样式只属于当前的页面,父组件的样式不会泄漏到子组件中。但是scoped也会造成一些额外的负担,如无法覆盖原有组件的样式。 可以加 /deep/  。

深度作用选择器 /deep/  or  >>>

如果希望scoped样式中的选择器“深入”,即影响子组件

例子:

/deep/ .el-table .red-row {

background: #ffc2c2;

}

或者

 .el-table >>> .red-row {

background: #ffc2c2;

}

less中的写法:

/deep/.el-table--enable-row-hover .el-table__body tr:hover>td {
               background-color: #3d5b99!important;
               color:'white';
 }

发布了234 篇原创文章 · 获赞 24 · 访问量 29万+

猜你喜欢

转载自blog.csdn.net/aliven1/article/details/103240923