MUI中无法复制ListItemText组件内文本该如何修改

Material UI 的ListItemText组件默认给内部渲染的文本节点添加了user-select: none样式，原生禁用了用户的文本选择能力，这是无法复制组件内文本的核心原因。另外你当前代码给ListItem根节点绑定了全局点击事件，选中文本过程中的鼠标操作很容易误触发父级跳转逻辑，也会干扰正常的复制操作。

方案1：单组件样式覆盖（适配当前代码场景，推荐） #

直接给目标ListItemText组件添加样式覆盖，放开文本选择权限，同时给内部可交互元素加事件冒泡阻止，避免选文本、点复制按钮时误触发父级点击事件，调整后完整代码如下：

<ListItem 
  key={staff._id}
  className={background_colour}
  onClick={par(set_viewing, component, staff)}
>
  {checkboxes}
  {avatar}
  <ListItemText 
    primary={text}
    onClick={(e) => e.stopPropagation()}
    sx={{
      '& .MuiListItemText-primary': {
        userSelect: 'text',
        cursor: 'text'
      },
      // 若组件同时使用了secondary属性展示辅助文本，可放开下面的配置
      // '& .MuiListItemText-secondary': {
      //   userSelect: 'text'
      // }
    }}
  />
  <Button  
    onClick={(e) => {
      e.stopPropagation();
      navigator.clipboard.writeText(email)
    }} 
    size='small' 
    variant="string"
  >
    {email}
  </Button>
  {renderActionButtons}
</ListItem>

调整完成后，就可以正常通过鼠标拖拽选中ListItemText内的文本，使用系统复制快捷键或者右键菜单完成复制操作。

方案2：全局主题统一配置（适合项目内所有ListItemText都需要支持复制的场景） #

如果项目中大量使用ListItemText且都需要支持文本复制，可以直接在MUI自定义主题中统一修改组件默认样式，无需逐个组件添加配置：

import { createTheme } from '@mui/material/styles';

const customTheme = createTheme({
  components: {
    MuiListItemText: {
      styleOverrides: {
        primary: {
          userSelect: 'text',
          cursor: 'text'
        },
        secondary: {
          userSelect: 'text'
        }
      }
    }
  }
});

使用全局配置时，只需要在有父级点击事件的ListItem场景下，单独给内部ListItemText、按钮等元素添加e.stopPropagation()阻止冒泡即可。

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