如何向子组件传递样式属性？修改输入框与matSuffix字体粗细

针对你要修改输入框和matSuffix字体粗细的需求，下面是几种实用的实现方式：

方法1：通过@Input()传递自定义样式类名 #

这种方式灵活性高，适合需要复用多组样式的场景。

子组件修改： #

1. 定义两个@Input()属性，分别接收输入框和后缀的样式类名：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-custom-input',
  templateUrl: './custom-input.component.html',
  styleUrls: ['./custom-input.component.css']
})
export class CustomInputComponent {
  @Input() label: string = '';
  @Input() type: string = 'text';
  @Input() suffix: string = '';
  @Input() inputClass: string = ''; // 接收输入框的样式类
  @Input() suffixClass: string = ''; // 接收后缀的样式类
}

2. 在模板中把类名绑定到对应元素：

<mat-form-field appearance="standard">
  <mat-label>{{label}}<span>*</span></mat-label>
  <input [type]="type" [class]="inputClass">
  <span matSuffix [class]="suffixClass">{{suffix}}</span>
</mat-form-field>

父组件使用： #

1. 在父组件的样式文件中定义自定义样式类：

/* 加粗输入框字体 */
.bold-input {
  font-weight: 700;
}

/* 加粗后缀字体 */
.bold-suffix {
  font-weight: 600;
}

2. 使用子组件时传入类名：

<app-custom-input
  label="用户名"
  type="text"
  suffix="@example.com"
  inputClass="bold-input"
  suffixClass="bold-suffix"
></app-custom-input>

方法2：通过@Input()传递样式对象 #

这种方式适合动态传递单个样式属性的场景。

子组件修改： #

1. 定义@Input()属性接收样式对象：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-custom-input',
  templateUrl: './custom-input.component.html',
  styleUrls: ['./custom-input.component.css']
})
export class CustomInputComponent {
  @Input() label: string = '';
  @Input() type: string = 'text';
  @Input() suffix: string = '';
  @Input() inputStyle: { [key: string]: string } = {}; // 输入框样式对象
  @Input() suffixStyle: { [key: string]: string } = {}; // 后缀样式对象
}

2. 用[ngStyle]绑定样式对象到对应元素：

<mat-form-field appearance="standard">
  <mat-label>{{label}}<span>*</span></mat-label>
  <input [type]="type" [ngStyle]="inputStyle">
  <span matSuffix [ngStyle]="suffixStyle">{{suffix}}</span>
</mat-form-field>

父组件使用： #

直接在模板中传入样式对象：

<app-custom-input
  label="密码"
  type="password"
  suffix="隐藏"
  [inputStyle]="{ 'font-weight': '700' }"
  [suffixStyle]="{ 'font-weight': '600' }"
></app-custom-input>

方法3：使用CSS自定义属性（变量） #

这种方式无需修改组件类，仅通过样式传递，适合全局或批量修改样式的场景。

子组件修改： #

在子组件的样式文件中，用CSS变量定义字体粗细：

/* custom-input.component.css */
input {
  font-weight: var(--input-font-weight, 400); /* 默认400 */
}

.mat-suffix {
  font-weight: var(--suffix-font-weight, 400); /* 默认400 */
}

父组件使用： #

在父组件的样式中，通过子组件选择器设置CSS变量：

/* 针对单个子组件实例 */
app-custom-input.username-input {
  --input-font-weight: 700;
  --suffix-font-weight: 600;
}

/* 或者全局应用到所有子组件 */
app-custom-input {
  --input-font-weight: 500;
}

然后在父组件模板中给子组件加类（如果是单个实例的情况）：

<app-custom-input
  class="username-input"
  label="用户名"
  type="text"
  suffix="@example.com"
></app-custom-input>

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