vue第三方组件css修改

  1. 1.使用全局统一覆盖
  2. 在.vue文件中修改
    1. 新建style标签不加scoped
    2. 深度选择器

1.使用全局统一覆盖

src/styles目录下新建一个css,根据需要,修改原有的class名称

然后在你的main.js中引入**import** './src/styles/element-ui-reset.css'

.vue文件中修改

新建style标签不加scoped

注意:一定要加上唯一的作用域 即最外层的class名或者id 。 它限定了当前的修改样式只能在元素以及其子元素中生效,防止影响其他地方(会影响到所有用到该组件的地方)

深度选择器

/deep/ 或 ::v-deep 操作符 ----两者都是 >>> 的别名

.el-table /deep/ tr{} //有效果但是vscode会有语法报错

.el-table >>> tr{} //有效果但是vscode会有语法报错

.el-table ::v-deep tr{} //有效果

注意:当未使用CSS预处理器(less或者scss)时

/deep/与>>>写在最前方(如:>>> .el-table)vscode编译器会报错

当使用CSS预处理器(less)时

>>>会报错


---