如何将按钮全大写文本转为首字母大写？现有CSS方案失效

算力阿峰

2026-7-8

按钮文本全大写转首字母大写的有效解决方法

你原来的CSS逻辑存在问题：先给容器设置text-transform: lowercase，又立即用更高优先级的规则覆盖为text-transform: uppercase，完全无法实现首字母大写的效果。另外，Angular Material的mat-button组件默认自带了全大写的文本转换样式，容器的样式会被按钮自身的样式覆盖。

以下是两种有效的解决方式：

方式一：精准选择器+首字母大写转换

直接针对按钮元素设置样式，覆盖组件默认的全大写规则：

.common-search-footer {
  display: flex;
  background: #ededed;
  font-size: small;
  color: rgba(0, 0, 0, 0.87);
  justify-content: flex-end;
  width: 100%;
}

/* 覆盖mat-button默认的全大写样式，并设置首字母大写 */
.common-search-footer button.mat-button {
  text-transform: capitalize;
}

方式二：强制覆盖（若优先级不足时使用）

如果组件默认样式优先级过高，可添加!important强制生效：

.common-search-footer {
  display: flex;
  background: #ededed;
  font-size: small;
  color: rgba(0, 0, 0, 0.87);
  justify-content: flex-end;
  width: 100%;
}

.common-search-footer button.mat-button {
  text-transform: capitalize !important;
}