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 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, i) => {
      return <MenuItem value={value[idPropName]}>{value.label}</MenuItem>;
    })}
  </Select>
</FormControl>;

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

Answer 2

我们可以使用带有

<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 3

当前的 Material Ui Select Component 支持 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 4

与此线程上的其他答案一样，Material UI Select Component 支持 endAdornment 和 startAdornment 但是，就像其他人提到的那样，选择箭头将与其重叠。

我的解决方案实际上是覆盖选择箭头的位置。

    <Select
     labelId="id"
     value={selectValue}
     endAdornment={
      <IconButton>
        <Tooltip title="tooltip text">
          <HelpIcon
          color="primary"
         />
        </Tooltip>
      </IconButton>
    }
    />

然后，无论你有你的CSS，包括：

    .MuiSelect-icon { right: 40px !important; }

但这完全取决于您想要选择箭头的位置，因此请根据您想要选择箭头的位置来调整这些值。

Answer 5

这行得通吗？

<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 6

试试这个。

            <Select
                onChange={onChange}
                endAdornment={
                    xVisible ? (
                        <div
                            onClick={xClick}
                        >
                            <i className="bi bi-x-lg"></i>
                        </div>
                    ) : null
                }
                sx={{
                    "& .MuiSelect-iconOutlined": {
                        display: xVisible ? "none" : "",
                    },
                    "&.Mui-focused .MuiIconButton-root": {
                        color: "primary.main",
                    },
                }}
            >
                <MenuItem value="10">Ten</MenuItem>
                <MenuItem value="20">Twenty</MenuItem>
            </Select>

Answer 7

对于任何其他尝试这样做的人——我还没有想出如何去做，但一个可能足够好的解决方法是将你想要的所有内容放在右对齐的 FormHelper 中的 endAdornment 中——这样它出现在表单域的输入框下方。