Ionic 8中如何为获焦的ion-searchbar添加兼容式自定义样式？

问题场景与需求 #

我在Ionic 8中为ion-searchbar编写自定义样式，需要实现：

• 输入文本左对齐
• 搜索图标右移（已实现）
• 搜索栏获焦或有文本输入时，隐藏搜索图标，仅显示清除按钮

初始尝试代码 #

// Toolbar Styles
ion-searchbar.monkey-searchbar {
  --background: transparent;
  --box-shadow: none;
  padding: 0;

  // Placeholder
  --placeholder-color: var(--gray);

  // Input Text
  --color: var(--lines-and-text);

  // Search Icon
  --icon-color: var(--gray);

  // Clear Button
  --clear-button-color: var(--dark-gray);


  // Underline
  border-bottom: 1px var(--gray) solid;


  &:focus-within {
    border-bottom: 1px var(--text-and-lines) solid;
    --clear-button-color: var(--text-and-lines);

    ion-icon {
      display: none;
    }

    // .searchbar-search-icon {  // 搜索图标的特定类
    //   display: none;
    // }

    // &::part(search-icon) {
    //   display: none;
    // }

    // .searchbar-input-container ion-icon {
    //   display: none;
    // }

  }


  ion-icon {
    // display: none;

    right: 10px !important;
    left: auto !important;
  }
}

遇到的问题 #

单独设置ion-icon { display: none; }能隐藏图标，但在:focus-within状态下无法生效；尝试过的类选择器、::part写法也都无效。目前只能妥协使用不隐藏图标的样式：

ion-searchbar.monkey-searchbar {
  --background: transparent;
  --box-shadow: none;
  padding: 0;

  // Placeholder
  --placeholder-color: var(--gray);

  // Input Text - 默认字体正确
  --color: var(--lines-and-text);

  // Search Icon
  --icon-color: var(--gray);

  // Clear Button
  --clear-button-color: var(--gray);

  // Underline
  border-bottom: 1px var(--gray) solid;

  &:focus-within {
    border-bottom: 1px var(--text-and-lines) solid;
    --icon-color: var(--dark-gray);
    --clear-button-color: var(--dark-gray);
  }
}

希望使用Ionic官方文档支持的、兼容Ionic 9的写法，不依赖组件内部DOM结构。

解决方案 #

利用Ionic官方提供的::part选择器和内置状态类实现需求：

ion-searchbar.monkey-searchbar {
  --background: transparent;
  --box-shadow: none;
  padding: 0;

  // 占位符样式
  --placeholder-color: var(--gray);
  // 输入文本样式
  --color: var(--lines-and-text);
  // 搜索图标默认颜色
  --icon-color: var(--gray);
  // 清除按钮默认颜色
  --clear-button-color: var(--dark-gray);

  // 底部下划线
  border-bottom: 1px var(--gray) solid;

  // 将搜索图标移至右侧
  &::part(search-icon) {
    right: 10px;
    left: auto;
  }

  // 获焦时的样式调整
  &:focus-within {
    border-bottom: 1px var(--text-and-lines) solid;
    --clear-button-color: var(--text-and-lines);
    
    // 隐藏搜索图标
    &::part(search-icon) {
      display: none;
    }
  }

  // 输入框有内容时隐藏搜索图标
  &.input-has-value {
    &::part(search-icon) {
      display: none;
    }
  }
}

关键说明 #

1. 官方::part选择器：使用::part(search-icon)定位搜索图标，这是Ionic官方推荐的组件样式自定义方式，不会因后续版本（如Ionic 9）的内部DOM结构变更而失效。
2. 覆盖所有触发场景：结合:focus-within处理获焦状态，input-has-value（Ionic内置类）处理已有输入文本的状态，确保两种场景下都能隐藏搜索图标。
3. 移除强制优先级：通过::part直接定位目标元素，无需使用!important提升样式优先级。

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