覆盖垫树的填充

Question

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

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

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

Answer 1

内联样式总是会覆盖您在外部样式表中的任何样式。这意味着除非您将 !important 放在填充定义的末尾，否则您将无法覆盖从指令接收的填充。

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

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

注意：使用 !important 将覆盖填充，但它也被视为带有 CSS 的大 "no no"。如果你能阻止指令自动向每个元素附加填充，那将是一个更好的解决方案。

Answer 2

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

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

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

Override padding for mat tree