Angular中mat-tree切换RTL方向后底部边框移除需求

当将Angular项目中的mat-tree组件切换为从右到左（RTL）布局后，组件底部会出现多余边框，需要移除该边框。

解决方案 #

在组件的CSS文件中添加以下样式代码：

/* 全局移除mat-tree底部边框 */
::ng-deep .mat-tree {
  border-bottom: none !important;
}

如果仅需要在RTL布局模式下生效，可使用属性选择器精准控制：

/* 仅RTL布局下移除mat-tree底部边框 */
[dir="rtl"] ::ng-deep .mat-tree {
  border-bottom: none;
}

说明 #

• 使用::ng-deep是为了穿透Angular的组件样式隔离，修改Material组件的默认样式；
• 若项目已全局配置RTL，直接用第一种写法即可；若需区分布局方向，第二种写法更严谨。

内容的提问来源于stack exchange，提问作者sridharan