Ionic中内置IonButton的IonItem如何实现内部IonLabel文本可选

Ionic 框架默认给所有ion-item容器设置user-select: none样式，目的是避免移动端点击交互组件时误触发系统文本选中浮层，该属性会被容器内所有子节点继承。当条目内部存在ion-button这类原生交互组件时，框架会强化条目容器的选中禁用逻辑，此时单纯给ion-label加内联样式user-select: text，会受Web Component样式隔离、框架默认样式优先级影响，无法正常覆盖选中禁用规则，最终出现文本选不中的问题。

不需要调整组件嵌套结构、不需要把IonButton移出IonItem，直接通过样式覆盖框架默认逻辑即可，可根据自身需要选择全量覆盖或者精准覆盖：

• 如果希望所有IonItem内的文本都支持选中，在项目全局样式文件中写入以下规则：

  /* 覆盖ion-item默认的文本禁用选中逻辑 */
  ion-item {
    user-select: text !important;
    -webkit-user-select: text !important;
  }
  /* 给IonButton单独保留框架默认的禁用选中状态，避免按钮区域出现选中异常 */
  ion-item ion-button {
    user-select: none !important;
    -webkit-user-select: none !important;
  }
  

• 如果仅需要部分IonItem开放文本选中能力，给需要的条目单独添加自定义类名（如selectable-item），再写入对应样式，不会影响其他条目的默认行为：

  <IonItem className="selectable-item">
    <IonLabel slot="start">
      Cant select this text even with user-select: text;
    </IonLabel>
    <IonButton onClick={() => console.log("Hello")}>
      Random button
    </IonButton>
  </IonItem>
  

  /* 仅给指定类名的条目覆盖选中禁用逻辑 */
  ion-item.selectable-item {
    user-select: text !important;
    -webkit-user-select: text !important;
  }
  ion-item.selectable-item ion-button {
    user-select: none !important;
    -webkit-user-select: none !important;
  }
  

• 样式生效后，原有组件结构不需要做任何修改，此时IonLabel内的文本可以正常拖拽选中、唤起系统复制菜单，IonButton的点击交互不受任何影响，也不会出现点击按钮时弹出文本选中浮层的异常，最终表现和“条目内无按钮时文本可选中”的状态完全一致，不需要调整插槽位置、不需要给组件加额外的选中事件监听。

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