求助：如何修改ion-button点击时的文本颜色？已实现部分样式

你的需求是自定义ion-button的链接样式：简洁外观、hover显示彩色下划线、点击时无波纹且文本变色。目前前两项已实现，波纹也移除了，但激活状态的文本颜色改不了，试了:active和--color-activated都无效。

问题出在Ion Button的文本是包裹在内部的.button-inner子元素里的，直接修改按钮本身的样式会被Shadow DOM的内部样式优先级覆盖。可以直接定位到这个子元素来设置激活状态的颜色，同时优化波纹移除的写法：

// Link
&.clear {
  // Hover样式保留
  &:hover {
    text-decoration: underline;
    text-decoration-color: var(--ion-color-secondary, #02c3e8);
    text-underline-offset: 5px;
    text-underline-width: 1.5px;
  }
  --background-hover-opacity: 0.0 !important;
  --background-activated-opacity: 0.0 !important;
  --ripple-color: transparent; // 直接设透明彻底消除波纹

  // 激活状态文本颜色修改
  &:active .button-inner,
  &.button-activated .button-inner {
    color: var(--ion-color-secondary, #02c3e8) !important;
  }
}

核心改动：

• 直接选中.button-inner子元素，同时覆盖:active和.button-activated两种激活状态（适配不同平台的样式类），强制设置文本颜色
• 把--ripple-color设为transparent，比用背景色更彻底移除波纹

这样就能快速解决激活状态文本颜色不生效的问题，不用去查看Stencil源码。

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