Angular项目按钮文字仅悬停可见，自定义.btn样式无法覆盖如何解决？

样式无法覆盖的根因 #

1. Angular 默认开启组件视图封装，组件样式文件内的规则会被自动添加属性限定符，无法命中全局引入的 Bootstrap 类样式，需使用 ::ng-deep 或直接写在全局 style.css 中
2. 你的按钮使用了 Bootstrap 的 btn-primary 类，该类自带的背景色、文字色规则权重高于单独的 .btn 选择器，同时按钮上还有行内 style="color: white" 规则，优先级更高，普通的类选择器无法覆盖

实现悬停显示文字的方案 #

推荐给按钮新增自定义类实现需求，避免修改全局 .btn 影响其他按钮：

步骤1：修改按钮HTML，新增自定义类，删除冗余行内样式

<button (click)="remove(item)" class="btn btn-primary btn-sm mt-2 btn-hover-text">Remove</button>

步骤2：添加对应CSS规则

如果写在全局style.css中，直接加入以下代码：

/* 默认状态文字透明 */
.btn-hover-text {
  color: transparent;
  transition: color 0.2s ease; /* 可选，添加过渡效果更顺滑 */
}
/* 悬停状态显示文字 */
.btn-hover-text:hover {
  color: #fff;
}

如果写在当前组件的样式文件中，需要搭配:host和::ng-deep避免污染全局样式：

:host ::ng-deep .btn-hover-text {
  color: transparent;
  transition: color 0.2s ease;
}
:host ::ng-deep .btn-hover-text:hover {
  color: #fff;
}

可选：默认状态隐藏按钮背景 #

如果需要默认状态下连按钮背景也隐藏，仅悬停显示完整按钮，修改CSS即可：

.btn-hover-text {
  color: transparent;
  background-color: transparent;
  border-color: transparent;
  transition: all 0.2s ease;
}
.btn-hover-text:hover {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

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