如何根据动态id值自定义Angular mat-input组件的CSS样式？

你的问题核心是原CSS中.mat-input-element的width: 100% !important优先级太高，普通的ID选择器无法覆盖。下面提供几种可行的解决方案：

方案一：增强选择器优先级（直接覆盖input样式） #

利用类选择器+ID选择器的组合提升优先级，同时加上!important覆盖原样式：

/* 针对val1的input */
.mat-input-element#val1 {
    width: 30% !important;
}

/* 针对val2的input */
.mat-input-element#val2 {
    width: 20% !important;
}

这种方式直接作用于input元素，能快速解决问题，但要注意!important的滥用可能导致后续样式维护困难。

方案二：控制容器宽度（更推荐） #

Angular Material的mat-form-field是input的容器，input默认占满容器宽度。因此可以直接调整容器的宽度，避免修改input的样式：

修改HTML #

给mat-form-field绑定对应的ID：

<mat-form-field class="form-field-container" id="{{ myVar.name }}-container">
    <input tabindex="0" id="{{ myVar.name }}" matInput [formControlName]="myVar.name" autocomplete="off"
      [placeholder]="myVar.placeholder" />        
</mat-form-field>

添加CSS #

#val1-container {
    width: 30%;
}

#val2-container {
    width: 20%;
}

这种方式符合Material组件的布局逻辑，不需要使用!important，样式更干净。

方案三：使用Angular动态类（灵活适配动态场景） #

如果需要根据变量动态切换样式，推荐用Angular的ngClass指令：

修改HTML #

<mat-form-field class="form-field-container" 
                [ngClass]="{'input-width-30': myVar.name === 'val1', 'input-width-20': myVar.name === 'val2'}">
    <input tabindex="0" id="{{ myVar.name }}" matInput [formControlName]="myVar.name" autocomplete="off"
      [placeholder]="myVar.placeholder" />        
</mat-form-field>

添加CSS #

/* 控制容器宽度的方式（推荐） */
.input-width-30 {
    width: 30%;
}

.input-width-20 {
    width: 20%;
}

/* 或者直接控制input（需要!important） */
/*
.input-width-30 .mat-input-element {
    width: 30% !important;
}

.input-width-20 .mat-input-element {
    width: 20% !important;
}
*/

这种方式更灵活，适合需要根据不同状态切换样式的场景。

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