How to style tree
Styles from thematerial/tree
package can be customized using the tree-overrides
mixin. This mixin accepts a set of tokens that control how the components will look, either for the entire app or under a specific selector. For example: @use '@angular/material' as mat;
// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
@include mat.tree-overrides((
container-background-color: orange,
node-text-color: red,
));
}
Tokens supported by tree-overrides
Name | Type | Based on system token |
---|---|---|
container-background-color | Color | --mat-sys-surface |
node-text-color | Color | --mat-sys-on-surface |
node-text-font | Typography | --mat-sys-body-large-font |
node-text-size | Typography | --mat-sys-body-large-size |
node-text-weight | Typography | --mat-sys-body-large-weight |
node-min-height | Density | None |