Material UI - 选择带有结束装饰的菜单

Question

是否可以将 endAdornment 放入 MaterialUI 中的选择菜单中？

我想将内容添加到选择菜单上向下指针的右侧。

endAdornment={
   <InputAdornment position="end">
        <Insights />
   </InputAdornment>

<Select
   labelId="demo-mutiple-name-label"
   id="demo-mutiple-name"
   multiple
   value={fieldName}
   onChange={handleChange}
   input={<Input id="select-multiple-chip" />}
   renderValue={(selected) => (
     <div className={classes.chips}>
     {selected.map((value) => (
        <Chip key={value} label={value} className={classes.chip} />
        ))}
     </div>
     )}
     MenuProps={MenuProps}
   >
   {field.map((field) => (
    <MenuItem key={field} value={field} >
        {field}
    </MenuItem>
   ))}
                            
</Select>

Answer 1

我接受了哈维尔的回答，但样式有点不同。正如他提到的，Material UISelect组件支持endAdornment，但是，它与箭头配合得不太好Select。主要问题是无论你放在那里什么，它都会重叠。这是我的做法的一个例子。

首先，定义一个将应用于该InputAdornment元素的类。您只需给它一些右填充，这样它就不会渲染在箭头顶部：

const useStyles = makeStyles((theme) =>
  createStyles({
    selectAdornment: {
      marginRight: theme.spacing(3),
    },
  })
);

然后只需将课程添加到InputAdornment您的Select

<FormControl className={classes.rowInputRoot} error={!!error}>
  <Select
    labelId="id"
    value={selectValue}
    endAdornment={
      <InputAdornment className={classes.selectAdornment} position="end">
        <CircularProgress size={20} />
      </InputAdornment>
    }
  >
    <MenuItem value="" selected>
      <em>Select</em>
    </MenuItem>
    {rowData.listValues?.map((value, i) => {
      return <MenuItem value={value[idPropName]}>{value.label}</MenuItem>;
    })}
  </Select>
</FormControl>;

这将渲染带有一点边距的装饰，以避免与选择箭头重叠。