你的Alert代码逻辑没问题，已经给“No”按钮正确添加了danger类，但Ionic 5的组件采用Shadow DOM做样式隔离，普通全局CSS选择器没法直接穿透到组件内部的按钮元素，这就是样式没生效的核心原因。下面给你两种可行的解决方案：

方案1：利用Ionic内置CSS变量（推荐） #

Ionic组件的样式大多通过内置CSS变量控制，直接针对danger类设置按钮的颜色变量即可，无需穿透Shadow DOM。修改你的全局CSS代码为：

.danger {
  --color: red !important;
}

这种方法更贴合Ionic的样式设计规范，兼容性也更好。

方案2：使用深度选择器穿透Shadow DOM #

如果需要更个性化的样式（比如修改背景色、边框等），可以在全局CSS文件中用Angular的::ng-deep深度选择器突破样式隔离：

::ng-deep .alert-button.danger {
  color: red !important;
  /* 还可以添加更多自定义样式，比如： */
  /* background-color: #ffebee; */
  /* border-radius: 4px; */
}

注意：这段代码必须放在全局样式文件（比如global.css或variables.css）中，组件级的CSS文件里用::ng-deep还需配合ViewEncapsulation.None，反而更繁琐。

额外提示 #

• 不要在组件的*.component.css里直接写.danger { color: red; }，组件样式默认有封装机制，无法影响Alert的Shadow DOM内部元素。
• 加!important是为了确保自定义样式优先级高于Ionic的默认样式，避免被覆盖。

内容的提问来源于stack exchange，提问作者Jared Ti Lian Eng