vue加scoped后无法修改样式(无法修改element UI 样式)

有的时候element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用

第一种方法

原因:scoped 
解决方法:去掉scoped 

注意:此时该样式会污染全局样式,可以把它放在公共的css里面 
为了不让所有的 el-input标签都是该样式,可以在HTML给改input加上一个类名,比如 modInput 

第二种方法

这不去掉scoped 的情况下

在全局样式中覆盖,这种解法,有弊端,可能会污染全局样式。为了不污染全局样式,也可单独加个类名

比如在引用全局样式前引用element ui的样式

第三种

样式放到app.vue里面 或者入口文件 index.vue ,样式就生效了 为了不污染其他页面样式,可单独加个类名

vue加scoped后无法修改样式(无法修改element UI 样式)_第1张图片

第四种

使用深度作用选择器,可以通过vue-loader提供的新写法  vue-loader 写法如下(先安装,在使用):

某些预处理器(如Sass)可能无法>>>正确解析。在这些情况下,您可以使用/deep/组合器 - 它是别名,>>>并且完全相同。


sass注意要用 /deep/ ,而无法使用 >>> 这个符号。

通过 v-html 创建的 DOM 内容不受作用域内的样式影响,但是你仍然可以通过深度作用选择器来为他们设置样式 。

第五种

更多技巧请查看vue专栏   https://blog.csdn.net/qq_42221334/column/info/27230/1

你可能感兴趣的:(Vue,css,vue专栏,CSS样式专栏)