Material Web 项目中文本按钮颜色自定义问题解析

问题现象

在 Material Web 项目中，开发者使用 md-text-button 组件时发现，当通过 --md-text-button-label-text-color 自定义按钮文本颜色后，在鼠标悬停或点击状态下，按钮文本颜色会恢复为系统主色（--md-sys-color-primary），而不是保持自定义的颜色值。

原因分析

这一现象实际上是 Material Web 设计的有意行为。Material Design 系统为按钮组件定义了完整的状态样式体系，包括默认、悬停、聚焦和按下等多种交互状态。每种状态都有对应的 CSS 自定义属性来控制样式表现。

当开发者仅修改了默认状态的文本颜色（--md-text-button-label-text-color），而没有同步修改其他状态的对应属性时，系统会自动回退到使用系统主色（--md-sys-color-primary）来保持视觉一致性。

解决方案

方案一：完整设置所有状态属性

开发者可以显式地为按钮的各个交互状态设置相同的文本颜色：

md-text-button {
  --md-text-button-label-text-color: #ba1a1a;
  --md-text-button-hover-label-text-color: #ba1a1a;
  --md-text-button-focus-label-text-color: #ba1a1a;
  --md-text-button-pressed-label-text-color: #ba1a1a;
}

这种方法虽然直接，但需要维护多个属性，当需要修改颜色时需要同步更新所有相关属性。

方案二：修改系统主色属性（推荐）

更优雅的解决方案是修改按钮组件的系统主色属性：

md-text-button {
  --md-sys-color-primary: #ba1a1a;
}

这种方法只需修改一个属性，系统会自动将这个颜色应用到按钮的所有状态和样式上。这是 Material Web 推荐的做法，因为：

1. 维护成本低，只需修改一个属性
2. 能确保所有状态的颜色一致性
3. 会同时影响按钮的其他视觉元素（如背景、边框、涟漪效果等）

最佳实践建议

1. 优先使用系统属性：在设计自定义主题时，应优先考虑修改系统级属性（--md-sys-color-*），而不是直接修改组件级属性。

2. 保持状态一致性：确保交互状态的颜色变化符合设计规范，避免不同状态下颜色跳跃过大影响用户体验。

3. 考虑无障碍设计：自定义颜色时应确保文本与背景有足够的对比度，满足 WCAG 可访问性标准。

4. 主题统一性：如果项目中多个组件需要使用相同颜色，建议在 :root 或更高层级定义系统属性，而不是单独为每个组件设置颜色。

通过理解 Material Web 的设计理念和样式系统的工作原理，开发者可以更高效地实现自定义设计，同时保持组件的一致性和可用性。