Angular material-expansionpanel 标题样式

Question

我想更改 Angular Dart material-expansionpanel 的 title 样式。

如果我使用下面的CSS，内容样式会改变（p.ex。单选组）但标题不会改变样式。

material-expansionpanel {
  font-weight: bold;
}

我需要怎样做才能改变标题的样式？

Answer 1

我以前从未使用过 AngularDart，但从示例来看，我认为您必须针对 panel-name class 来设置扩展面板的样式 header:

.panel-name {
    font-weight: bold;
}

Answer 2

由于样式是封装的，您需要使用我们的 mixin 之一或 ::ng-deep 来打破封装。由于没有为此你可以做的混合。

:host ::ng-deep header .primary-text {
  font-weight: bold;
}

:host是为了保持当前组件的范围，这样它就不会泄露出去。 ::ng-deep 打破了封装，剩下的就是选择器了。