vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式 ,vue项目使用组件后 scoped样式覆盖不了组件内部样式解决,/deep/和 >>>

在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题。但是想要修改还是有方法的:

1. 在不去掉scoped的情况下,在全局样式中覆盖,这种解法,有弊端,可能会污染全局样式。

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

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


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

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

你可能感兴趣的:(vue-cli,element)