如何从父组件为子组件设置样式？Angular中子组件无法继承父组件CSS样式问题求解

这个问题其实是Vue的样式作用域机制导致的——当你给父组件的<style>加上scoped属性时，Vue会自动给组件内的所有元素添加一个独一无二的属性（比如data-v-xxxxxx），同时把你的CSS选择器也加上这个属性后缀，这样样式就只会作用于当前组件的元素。而子组件的<p class="tags">属于子组件的作用域，不会带上父组件的那个专属属性，所以父组件的.chips .tags自然就匹配不到它啦。

1. 使用深度选择器（最常用的方案） #

Vue提供了深度选择器来打破作用域限制，让父组件的样式能穿透到子组件内部。不同的CSS预处理器写法略有区别：

• 普通CSS/PostCSS：用>>>

  <style scoped>
    .chips >>> .tags {
      color: red;
    }
  </style>
  

• Sass/Scss：用::v-deep（/deep/在新版Sass里可能会报错）

  <style scoped lang="scss">
    .chips {
      ::v-deep .tags {
        color: red;
      }
    }
  </style>
  

• Less：用/deep/

  <style scoped lang="less">
    .chips /deep/ .tags {
      color: red;
    }
  </style>
  

深度选择器会让Vue忽略子组件的作用域属性，直接匹配到子组件内的.tags元素，完美解决你的问题。

2. 把样式放到非scoped的