如何使 Angular Material 的按鈕切換全寬但左對齊其內容？

Question

我在按鈕切換組中有一棵按鈕切換樹：

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
    <mat-button-toggle-group [ngModel]="selectedElement" (ngModelChange)="select($event)">
        <!-- This is the tree node template for leaf nodes -->
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
            <li class="mat-tree-node">
                <!-- use a disabled button to provide padding for tree leaf -->
                <button mat-icon-button disabled></button>
                <mat-button-toggle class="selectable" [value]="node.ref">
                    <mat-icon class="type-icon">
                        {{getDisplayIcon(node.ref.type)}}
                    </mat-icon>
                    {{node.name}}
                </mat-button-toggle>
            </li>
        </mat-tree-node>
        <!-- This is the tree node template for expandable nodes -->
        <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
            <li>
                <div class="mat-tree-node">
                    <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name">
                        <mat-icon class="mat-icon-rtl-mirror">
                            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                        </mat-icon>
                    </button>
                    <mat-button-toggle class="selectable" [value]="node.ref">
                        <mat-icon class="type-icon">
                            {{getDisplayIcon(node.ref.type)}}
                        </mat-icon>
                        {{node.name}}
                    </mat-button-toggle>
                </div>
                <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
                    <ng-container matTreeNodeOutlet></ng-container>
                </ul>
            </li>
        </mat-nested-tree-node>
    </mat-button-toggle-group>
</mat-tree>

它可以工作，但每個按鈕切換都有不同的寬度，具體取決於其內容的大小：

我可以通過將此添加到我的.scss文件來使每個按鈕全寬：

.selectable {
    width: 100%;
}

哪個有效，但所有這些都是居中而不是左對齊（而且真正長的超出了）：

我已將問題縮小到由mat-button-toggle生成並圍繞我的內容並具有display: inline-block span ：

添加width: 100%到這個span可以讓我向內容添加一個彈性框並正確對齊它們，但我無法更改 Angular 中的跨度，因為它不是我的組件。 我也無法設置mat-button-toggle樣式以將內容左對齊，因為子button元素是全寬的。 我怎樣才能讓它做我想做的事？

Answer 1

正如 Francesco Lisandro 指出的那樣，我可以使用我的應用程序的 styles.css 來修改我通常無法修改的元素。 這是我添加的：

mat-button-toggle.selectable button span {
    display: flex;
    align-items: center
}