如何修改Angular Material进度条填充方向为右向？CSS实现无效解决

原代码修改不生效的核心原因 #

你写的自定义CSS存在两个关键问题，导致填充方向完全没有按预期修改为右向：

• 选择器作用节点错误：无论是哪个版本的Angular Material，真正控制填充长度的scaleX变换属性，都是直接绑定在.mat-progress-bar-fill节点上的。你在选择器中嵌套的.mat-progress-bar-element只是纯色填充的背景块，本身不会被设置任何变换属性，哪怕匹配到了这个节点，给它设置的transform-origin也完全不会影响父级节点的变换效果，根本达不到调整填充方向的目的
• 样式被视图封装拦截：Angular Material组件默认开启视图隔离机制，组件外部编写的普通CSS选择器，会被隔离规则拦截，无法作用到组件内部的进度条原生节点，哪怕选择器完全匹配，自定义样式也不会生效

可直接生效的实现代码 #

1. 补充视图穿透规则，把变换属性绑定到真正承载填充位移的节点上：

   ::ng-deep .mat-progress-bar .mat-progress-bar-fill {
       /* 把变换原点固定在填充块的右上角，让填充从右侧开始锚定 */
       transform-origin: top right;
       transition: transform 250ms ease;
       /* 关闭原生默认的左向填充动画，避免双向逻辑冲突 */
       animation: none;
   }
   

2. 适配新版MDC结构的进度条选择器：如果项目使用的是Angular Material 15及以上的新版组件，把选择器替换为.mat-mdc-progress-bar .mat-mdc-progress-bar-fill即可，其他属性配置保持不变。
3. 效果说明：配置完成后，进度条的填充块会以右侧为固定起点，随着进度值升高逐渐向左延伸，完全符合右向起点的填充要求，不需要额外修改原生进度条的进度计算逻辑，scaleX变换会基于新的变换原点自动适配反向填充方向。

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