Question

我正在使用此示例here使用平面mat-tree构建datasource。现在，我想为以下所有子项覆盖默认的padding-left，即40px。这就是我的做法：

mat-tree-node:not(:first-child) {
    padding-left: 16px;
}

这有效，但仅在树节点的级别2上设置16px填充。当我继续扩展它们时，其余的嵌套子项不会累积16px。是否可以覆盖matTreeNodePadding指令？

Answer 1

我能够使用api文档here解决此问题。在这种情况下，必须为matTreeNodePadding缩进传递选择器输入。

<mat-tree-node matTreeNodePadding matTreeNodePaddingIndent="20">

这会将现有的默认默认40px左边距填充为20px。

Answer 2

内联样式始终会覆盖外部样式表中的所有样式。这意味着除非您在填充定义的末尾加上!important，否则您将无法覆盖从指令接收的填充。

您可以使用以下代码进行操作：

mat-tree-node {
  padding-left: 16px !important;
}

注意：使用!important将覆盖填充，但是CSS也将其视为很大的“不反对”。如果可以防止该指令将填充自动添加到每个元素，那将是一个更好的解决方案。