如何实现带附加文本且不影响值的MUI Select组件

针对你遇到的Select字段添加“Rows”文本被遮挡、不可点击，且不想影响选项和字段值的问题，直接通过MUI的InputProps配置即可解决，具体代码调整如下：

import { InputAdornment, Typography } from '@mui/material';

// ... 其他代码

<Select
  id="row_select"
  value={rowsPerPage}
  onChange={onChangeRowsPerPage}
  InputProps={{
    // 添加右侧装饰文本
    endAdornment: (
      <InputAdornment 
        position="end" 
        sx={{ 
          marginRight: 2, // 避开箭头图标
          pointerEvents: 'auto' // 允许文本被点击
        }}
      >
        <Typography variant="body1" onClick={() => { /* 这里可添加点击逻辑 */ }}>
          Rows
        </Typography>
      </InputAdornment>
    ),
    // 给输入框右侧留足空间，避免数值被装饰文本覆盖
    sx: { paddingRight: '40px' }
  }}
>
  {rowsPerPageOptions.map((x, i) => (
    <MenuItem value={x} key={i}>
      {x}
    </MenuItem>
  ))}
</Select>

关键说明 #

• 利用InputProps.endAdornment添加“Rows”文本，属于UI装饰层，不会出现在选项列表中，也不会干扰Select的字段值。
• 通过marginRight调整装饰文本与箭头图标的间距，避免遮挡；给输入框设置paddingRight，确保选中的数值显示完整。
• 设置pointerEvents: 'auto'解除装饰文本的点击禁用，让文本可以响应点击事件（不需要点击的话可以去掉这个属性）。

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