Angular 5中子组件继承父组件CSS样式失败，如何解决？

嘿，我看你碰到了子组件没法继承父组件CSS样式的难题，用:host伪类没生效对吧？这大概率是因为你对:host的作用范围理解有点偏差，咱们一步步来搞定它：

先搞清楚:host为啥没起作用 #

:host是用来选中自定义组件本身的——比如你的子组件如果是<my-child-component>，:host选中的就是这个根标签，而不是它内部的.table-row.body这些嵌套元素。所以想用它让子组件内部元素继承父类样式，方向就错啦。

方案1：用:host-context()匹配父组件的类（Web Components/Vue都能用） #

假设父组件有个类叫.parent-styles，你可以在子组件的样式里用:host-context()来检测父组件的类，然后给子组件内部元素应用对应样式：

/* 子组件的样式文件 */
:host-context(.parent-styles) .table-row.body {
  /* 直接继承父组件的样式属性 */
  color: inherit;
  font-size: inherit;
  /* 如果用Sass/LESS，还能直接复用父类的样式规则 */
  @extend .parent-styles;
}

这个逻辑很简单：当子组件被带有.parent-styles类的父元素包裹时，就给子组件里的.table-row.body套上对应的样式。

方案2：用CSS变量（最通用的跨组件样式传递方式） #

这是我最推荐的方法，完全不受样式隔离的限制，不管你用啥框架都能行：
先在父组件里定义好CSS变量：

/* 父组件样式 */
.parent-component {
  --row-text-color: #333;
  --row-padding: 8px 12px;
  --row-bg: #f5f5f5;
}

然后在子组件里直接引用这些变量：

/* 子组件样式 */
.table-row.body {
  color: var(--row-text-color, #666); /* 第二个值是默认 fallback */
  padding: var(--row-padding);
  background-color: var(--row-bg, #fff);
}

这种方式既保留了组件的样式封装性，又能精准控制要继承的样式属性，简直一举两得。

方案3：如果是Vue的scoped样式，用深度选择器 #

要是你用的是Vue，而且父组件加了scoped属性，那父组件的样式默认是渗透不到子组件里的。这时候可以用深度选择器:deep()来打破这个限制：

/* 父组件的scoped样式 */
.parent-component :deep(.table-row.body) {
  background-color: #f5f5f5;
  border-bottom: 1px solid #eee;
}

旧版Vue可能需要用/deep/或者::v-deep，根据你的Vue版本调整就行。

方案4：关闭子组件的样式隔离（慎用！） #

如果是Web Components，你可以在创建Shadow DOM的时候关闭样式隔离：

class MyChild extends HTMLElement {
  constructor() {
    super();
    // 关闭样式隔离，父组件样式会直接影响子组件内部
    this.attachShadow({ mode: 'open', delegatesFocus: true });
    // 然后挂载你的模板...
  }
}

不过这个方法会彻底打破组件的样式封装，很容易引发样式冲突，除非你完全确定不会有样式污染，否则别随便用。

结合你给出的子组件结构，我最推荐CSS变量或者**:host-context()**的方案，既能保持组件的独立性，又能完美继承父组件的样式。

内容的提问来源于stack exchange，提问作者AlexFF1