覆盖垫树的填充答案

【问题标题】：Override padding for mat tree覆盖垫树的填充
【发布时间】：2019-08-22 08:47:14
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

这会将现有的默认 40 像素左内边距覆盖为 20 像素。

【讨论】：

另一种方式，您可以将输入作为<mat-tree-node matTreeNodePadding [matTreeNodePaddingIndent] = treeNodePadding> ，并在您的组件打字稿文件中将其输入值设置为@input('cdkTreeNodePadding') treeNodePadding: number = 20;

【解决方案2】：

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

您可以使用以下代码做到这一点：

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

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

【讨论】：

此解决方案将所有级别置于 16px 的 padding-left。我希望在从根扩展的每个级别上都有一个增量 16x2 填充。
啊，明白了。由于 HTML 输出是完全平坦的，这将变得越来越混乱。理想情况下，这些元素将被嵌套以允许我们定位儿童并提高页面的可访问性。综上所述，您可以通过内联样式定位元素：div[style*="display:block"] { ... } 这意味着您可以手动定位从指令接收到的不同级别的填充：mat-tree-node[style*="padding-left: 40px"] { padding-left: 16px !important; }mat-tree-node[style*="padding-left: 80px"] { padding-left: 32px !important; }