Autocomplete组件中InputLabelProps设置userSelect:text不生效问题

原因分析 #

你遇到的问题是因为MUI的Autocomplete组件内部为关联的InputLabel添加了优先级更高的样式规则，强制设置了user-select: none，直接覆盖了你通过InputLabelProps或全局主题配置的样式：

• Autocomplete会给内部的InputLabel附加专属类名（如MuiAutocomplete-label），并通过嵌套选择器（.MuiAutocomplete-root .MuiInputLabel-root）设置user-select: none，这个选择器的优先级高于你直接给InputLabel设置的样式。
• 全局主题中针对MuiInputLabel的styleOverrides是基于基础类名的样式，优先级低于Autocomplete的嵌套选择器，所以无法生效。

解决方案 #

方案1：通过Autocomplete的sx属性直接覆盖内部标签样式 #

在Autocomplete组件上使用sx属性，针对其内部的InputLabel设置样式，确保优先级足够：

<Autocomplete
  sx={{
    '& .MuiInputLabel-root': {
      userSelect: 'text'
    }
  }}
  options={top100Films}
  renderInput={(params) => (
    <TextField {...params} label="可选中的标签" />
  )}
/>

方案2：全局主题中针对Autocomplete的标签样式做覆盖 #

如果需要全局生效，可以在主题配置中直接修改MuiAutocomplete内部的标签样式：

const theme = createTheme({
  components: {
    MuiAutocomplete: {
      styleOverrides: {
        label: {
          userSelect: 'text'
        }
      }
    }
  }
});

这两种方式都能确保样式优先级足够，让标签文本支持单击或双击选中复制。

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