Vue中scoped样式穿透 修改第三方框架样式

Posted 2021-05-20 Frazier_梁超

相信很多小伙伴在开发中都遇到过，使用框架开发，但是有地的放的样式跟设计图不一样的时候，那么我们如何修改框架的样式呢？

1、什么是scoped？它的作用是什么？

在vue组件样式中使用scoped，相当于将样式私有化，即样式只用于与当前组件。
通过该属性，可以使得组件之间的样式不互相污染。

2、为什么需要穿透scoped？

一般项目中会引用了第三方组件，需要根据需求在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。就需要样式穿透啦

第一种：全局样式表进行样式覆盖

新建 global.css 文件，并在 main.js 中引入。 global.css 文件一般都放在 src->assets 静态资源文件夹下的 style 文件夹下

//在 main.js 的引用写法如下：
import "./assets/style/global.css";

第二种：使用 /deep/ 深度修改标签样式

找到需要修改的 ElementUI 标签的类名，然后在类名前加上 /deep/ ，可以强制修改默认样式。这种方式可以直接用到有 scoped 属性的 style 标签中。

// 修改选择框的默认宽度
/deep/ .el-cascader {
  width: 100%;
}

第三种：使用>>>

<style scoped>
    外层 >>> 第三方组件 {
        样式
    }
</style>

当然了还有很多方法，以上是常用的三种个人建议使用后两种