如何为ngx-formly的字段、标签及输入框添加自定义CSS？

作为ngx-formly新手，不用愁，下面几种方法能快速搞定自定义样式，直接上手：

1. 给字段加className配置（最便捷） #

直接在字段配置里添加className属性，然后在CSS里针对这个类写样式，精准控制单个或一类字段。

示例： #

字段配置（TypeScript）：

fields = [
  {
    key: 'username',
    type: 'input',
    props: {
      label: '用户名',
      placeholder: '请输入用户名',
    },
    className: 'custom-username-field', // 自定义类名
  },
  {
    key: 'phone',
    type: 'input',
    props: {
      label: '手机号',
      placeholder: '请输入手机号',
    },
    className: 'custom-phone-field',
  },
];

对应的CSS（组件内或全局样式文件）：

/* 控制标签样式 */
.custom-username-field .formly-label {
  color: #2c3e50;
  font-weight: 600;
  margin-bottom: 8px;
}

/* 控制输入框样式 */
.custom-username-field .formly-control input {
  border-radius: 8px;
  border: 1px solid #bdc3c7;
  padding: 10px 12px;
  width: 100%;
}

/* 给手机号字段加不同样式 */
.custom-phone-field .formly-control input {
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
}

2. 自定义字段模板（完全掌控结构和样式） #

如果需要更灵活的布局，直接用template属性重写字段的HTML结构，想加什么类就加什么类，完全自定义。

示例： #

fields = [
  {
    key: 'email',
    type: 'input',
    // 自定义模板
    template: `
      <div class="custom-email-box">
        <label class="custom-email-label">{{ to.label }}</label>
        <input 
          type="email" 
          [formControl]="formControl" 
          [formlyAttributes]="field"
          class="custom-email-input"
        />
        <!-- 自定义错误提示 -->
        <span *ngIf="formControl.invalid && formControl.touched" class="custom-error">
          请输入有效的邮箱
        </span>
      </div>
    `,
    props: {
      label: '邮箱',
      placeholder: 'example@xxx.com',
    },
  },
];

CSS：

.custom-email-box {
  margin-bottom: 20px;
}

.custom-email-label {
  display: block;
  color: #34495e;
  font-size: 14px;
  margin-bottom: 6px;
}

.custom-email-input {
  width: 100%;
  padding: 10px;
  border: 2px solid #3498db;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.custom-email-input:focus {
  outline: none;
  border-color: #2980b9;
}

.custom-error {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 5px;
}

3. 覆盖Formly默认CSS类（批量修改） #

ngx-formly自带一系列默认类名，比如formly-field（字段容器）、formly-label（标签）、formly-control（输入框容器），直接在样式里覆盖这些类就能批量修改所有字段的样式。

注意： #

• 如果是组件内样式，需要用::ng-deep穿透Angular的样式隔离（或者设置viewEncapsulation: ViewEncapsulation.None，但要注意不要污染全局样式）；
• 如果是全局样式文件（比如styles.css），直接写就行，不需要::ng-deep。

示例： #

/* 组件内样式，用::ng-deep穿透 */
::ng-deep .formly-field {
  margin-bottom: 1.5rem; /* 统一字段间距 */
}

::ng-deep .formly-label {
  font-family: 'Arial', sans-serif;
  color: #2d3748; /* 统一标签颜色 */
  font-weight: 500;
}

::ng-deep .formly-control input,
::ng-deep .formly-control select {
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 给所有输入框加阴影 */
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  padding: 10px;
}

4. 自定义Wrapper（统一包裹多字段样式） #

如果有一组字段需要统一的样式（比如带边框的卡片式布局），可以自定义一个Wrapper组件，然后给需要的字段应用这个Wrapper。

步骤： #

1. 创建Wrapper组件：

import { Component } from '@angular/core';
import { FieldWrapper } from '@ngx-formly/core';

@Component({
  selector: 'app-card-wrapper',
  template: `
    <div class="card-wrapper">
      <h4 class="card-title">{{ to.label }}</h4>
      <ng-container #fieldComponent></ng-container>
      <div *ngIf="showError" class="card-error">{{ errorMessage }}</div>
    </div>
  `,
  styles: [`
    .card-wrapper {
      padding: 20px;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      margin-bottom: 20px;
      background-color: #f7fafc;
    }

    .card-title {
      margin-top: 0;
      margin-bottom: 15px;
      color: #2d3748;
      font-size: 16px;
    }

    .card-error {
      color: #dc2626;
      font-size: 12px;
      margin-top: 8px;
    }
  `],
})
export class CardWrapperComponent extends FieldWrapper {}

2. 在模块里注册Wrapper：

import { NgModule } from '@angular/core';
import { FormlyModule } from '@ngx-formly/core';
import { CardWrapperComponent } from './card-wrapper.component';

@NgModule({
  imports: [
    FormlyModule.forRoot({
      wrappers: [
        { name: 'card', component: CardWrapperComponent }, // 注册wrapper，命名为card
      ],
    }),
  ],
  declarations: [CardWrapperComponent],
})
export class AppModule {}

3. 在字段里应用Wrapper：

fields = [
  {
    key: 'address',
    type: 'input',
    wrapper: 'card', // 应用自定义的card wrapper
    props: {
      label: '收货地址',
      placeholder: '请输入详细地址',
      required: true,
    },
  },
];

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