如何在vue组件中覆写elementUI组件样式+scoped

最新推荐文章于 2024-05-16 13:44:05 发布

谈论者

最新推荐文章于 2024-05-16 13:44:05 发布

阅读量752

点赞数 1

文章标签： elementui css

本文链接：https://blog.csdn.net/change10000/article/details/116209685

版权

这是一个非常常见的问题。覆写第三方Ui库的组件样式时经常会碰到。同时使用 scoped与 /deep/才是覆盖样式最优解

单组件页面覆写：

<style scoped>
</style>

为了vue页面样式模块化，不对全局造成污染，建议每个页面的style标签加上scoped，表示他的样式只属于当前的页面，父组件的样式不会泄漏到子组件中。

但是scoped也会造成一些额外的负担，如无法覆盖原有组件的样式。

解决方法：

在目标组件外层添加一个div盒子，同时添加深度作用选择器 /deep/ or >>>

使用例子：

#outBox /deep/ .el-radio .el-radio__label{
    display:none;
}

#outBox >>> .el-radio .el-radio__label{
    display:none;
}

全局组件样式覆写：

通常在引入的main.css 或 index.css文件覆写。

或者直接在UI库样式文件内覆写。

惟求热泪盈眶与成就感 ^_

关注