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

159 阅读 0 评论 105 点赞

我是靠谱客的博主完美裙子，这篇文章主要介绍如何在vue组件中覆写elementUI组件样式+scoped，现在分享给大家，希望可以做个参考。

这是一个非常常见的问题。覆写第三方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库样式文件内覆写。

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

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。