vue 添加样式使用scoped属性，样式不起作用问题

出现这种情况的原因

• 父组件没有使用scoped标识，使用的子组件用了scoped标识，在父组件中设置子组件中的节点的样式
• 父组件使用了scoped标识，子组件没有使用，父组件中设置子组件样式

出现这种情况的原因

• 父组件没有使用scoped标识，使用的子组件用了scoped标识，在父组件中设置子组件中的节点的样式
• 父组件使用了scoped标识，子组件没有使用，父组件中设置子组件样式

所以

• 如果我们添加了子组件，并且子组件使用scoped标识，那么在父组件中是不能设置子组件中的节点的样式
• 若父组件有scoped，子组件没有设置，同样，也是不能在父组件中设置子组件的节点样式

若想在父组件中修改子组件的样式，应该怎么办

 

     1.第一种：穿透方法

1 2 3 4 5

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

 

 

     2.第二种：再写一个style，不加scoped

1 2 3 4 5 6

<style>      /*全局样式*/ </style> <style scoped>      /*局部样式*/ </style>