要更改可重复使用的嵌套组件的样式

Question

我的组件中有一个具有一定宽度的表。问题是当我在另一个组件中重用该组件选择器时，我无法覆盖angular中的表样式。

我尝试过以下CSS：

:host /deep/ component-selector {
  width:50px;
}

Answer 1

那是因为视图封装。您可以将其关闭或编写破损的CSS样式

:: ng-深入您的风格

Answer 2

尝试以下操作

/deep/ <css selector>{width:50px}

如果仍然无法使用，请使用!important

/deep/ <css selector>{width:50px !important}

Answer 3

根据角度样式指南，样式不应从父母流向孩子 即->具有您的的组件不应照顾孩子的样式。

您应该做的是利用主机上下文。

将一个类应用于父类（比方说，widht-mid）。在孩子的css中，您需要检查我的父母是否有widht-mid类，如果是，则应更改其宽度。

在孩子的css文件中->

:host-context(.width-mid) table{
width: 50px
}

您不应将样式从父项本质转换为子项本质，因为这会破坏Angular引以为傲的ViewEncapsulation优势。这是一些参考。 ：Style Guide（以上答案也已弃用，Angular团队正在考虑将其完全删除）

此外，子组件应负责其表的外观。父母应该关心自己。将来，如果您有两个孩子给父母（一个父母中有两个。），将很难管理将哪种样式传递给哪个孩子。使用这种方法，更改样式不仅简单而且易于管理。

如果我能提供帮助，请投票并标记为已解决。干杯。