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

最新推荐文章于 2022-04-17 13:32:47 发布

谈论者

最新推荐文章于 2022-04-17 13:32:47 发布

阅读量816

点赞数 1

文章标签： elementui css

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

版权

在Vue开发中，使用scoped可以防止样式污染，但也会导致无法覆盖第三方库样式。解决这个问题的方法是在组件外部包裹一层元素，并结合/deep/或>>>选择器。本文介绍了如何在单组件页面和全局组件中有效地覆写样式，以实现更精确的样式控制。

摘要由CSDN通过智能技术生成

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

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

关注