Angular 17集成Material Design 3求助：组件使用方法咨询

你已经完成了Material Design 3（Web Components版本）的安装，接下来可以按以下步骤快速上手组件使用：

1. 导入目标组件的定义 #

在你要使用MD3组件的Angular组件TS文件中，导入对应的组件模块，比如要使用填充按钮：

import '@material/web/button/filled-button.js';

同理，其他组件如输入框、卡片等，都可以从@material/web/[组件名]/[组件文件].js路径导入。

2. 配置Angular支持自定义元素 #

因为MD3 Web Components属于自定义元素，需要在Angular中开启支持：

• 如果是NgModule项目：在app.module.ts中添加CUSTOM_ELEMENTS_SCHEMA

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // 添加这行开启自定义元素支持
})
export class AppModule { }

• 如果是独立组件（Angular 17推荐）：在组件元数据中加入schemas配置

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // 添加这行
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'md3-demo';
}

3. 在模板中直接使用MD3组件 #

配置完成后，就可以在组件的HTML模板里直接写MD3的自定义标签了，比如：

<!-- 填充按钮 -->
<md-filled-button>提交</md-filled-button>

<!-- 轮廓按钮 -->
<md-outlined-button>取消</md-outlined-button>

<!-- 文本输入框 -->
<md-filled-text-field label="用户名"></md-filled-text-field>

4. 配置基础样式与主题 #

MD3组件依赖基础样式才能正常显示，在全局styles.css中导入必要的样式文件：

/* 导入排版和颜色基础样式 */
@import '@material/web/typography/md-typescale-styles.css';
@import '@material/web/color/color-scheme.css';

你还可以自定义主题色，通过CSS变量覆盖默认值：

:root {
  --md-sys-color-primary: #16a34a; /* 自定义主色调为绿色 */
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-secondary: #8b5cf6; /* 自定义辅助色 */
}

额外提示：使用Angular官方Material库（适配MD3） #

如果你更倾向于贴合Angular生态的使用方式，可以直接安装Angular官方的Material组件库（已全面支持MD3）：

1. 安装命令：

ng add @angular/material

安装时选择Material Design 3主题即可。
2. 导入组件模块（以按钮为例）：

import { MatButtonModule } from '@angular/material/button';
// 在独立组件的imports数组或NgModule的imports中添加这个模块

3. 在模板中使用：

<button mat-raised-button>Angular MD3按钮</button>

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