Question

是否可以在MaterialUI的Select菜单中添加endAdornment？

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

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

我接受了 Javier 的回答，但样式略有不同。正如他所提到的，Material UI Select 组件支持 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: any, i: any) => {
        return <MenuItem value={value[idPropName]}>{value.label}</MenuItem>;
    })}
  </Select>
</FormControl>

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

Answer 2

当前材料Ui选择组件支持endAdornment，但是，与选择箭头配合使用效果不佳。

我要做的是添加一个startAdornment并添加一个makeStyles类以将装饰置于绝对位置，makeStyle类具有以下内容：

const useStyles = makeStyles((theme) => ({
  selectAdornment: {
    "& .MuiButtonBase-root": {
      position: "absolute",
      padding: 0,
      right: "32px",
      top: "calc(50% - 12px)",
    },
  },
}));

选择如下所示：

<Select
  {...props}
  onChange={handleChange}
  startAdornment={
    <InputAdornment position="start" className={classes.selectAdornment}>
      <IconButton>
        <Tooltip title="tooltip text">
          <HelpIcon
            color="primary"
          />
        </Tooltip>
      </IconButton>
    </InputAdornment>
  }
/>

Answer 3

我们可以使用带有 <Select> 的 <TextField>，而不是使用 <MenuItem>。

<TextField
      style={{ width: "100%" }}
      name="cls"
      select
      label="Items"
      helperText="Please select Class"
      margin="normal"
      variant="outlined"
      InputProps={{
        endAdornment: (
          <InputAdornment position="start">something</InputAdornment>
        )
      }}
    >
      <MenuItem>Item 1</MenuItem>
      <MenuItem>Item 2</MenuItem>
      <MenuItem>Item 3</MenuItem>
    </TextField>
  );

查看示例沙盒示例 https://codesandbox.io/s/material-demo-forked-9vqb3?file=/demo.js

Answer 4

这项工作可以吗？

<FormControl>
    <Select {...props}>
        {values.map((value) => (
            <MenuItem
                key={value}
                value={value}
            >
                <Typography variant="inherit">{value}</Typography>
                <ListItemSecondaryAction>
                    <IconButton edge="end" aria-label="delete">
                        <Check />
                    </IconButton>
                </ListItemSecondaryAction>
            </MenuItem>
        ))}
    </Select>
</FormControl>

Answer 5

对于其他尝试执行此操作的人-我还没有弄清楚该怎么做，但是一种可行的解决方法是将所需的所有内容放入endAdornment中正确对齐的FormHelper中-因此出现在表单字段中输入框的下方。

材质UI-选择带有装饰的菜单

5 个答案: