如何设置 p-tree 的宽度以填充可用的 space？

Question

我无法正确设置宽度来填充 p-tree primeng 控件的可用 space。当我手动执行它时，它在 chrome devtools 中工作，但当我在我的组件的样式文件中执行时，它不工作。

Stackblitz link:

树无论如何都会保持 18em 的宽度。提前谢谢你。

html代码：

<p-tree [value]=filesTree1></p-tree>

css代码：

.ui-tree {
  width: 100%;
}

Answer 1

可以使用p-tree控件的styleClass 属性。

<p-tree [value]=filesTree1 [styleClass]="'my-tree'"></p-tree>

在 tree.scss 文件中添加 css 下面。

:host ::ng-deep .ui-tree.my-tree {
  width: 100%;
}

how do I set the width of p-tree to fill the available space?