Material UI - 带有末尾装饰的选择菜单

Question

在MaterialUI中，是否可以将endAdornment添加到Select菜单中？

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

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>

- Mel

Answer 1

我使用了Javier的答案，但样式有所不同。正如他所提到的，Material UI Select 组件支持 endAdornment，但是它与 Select 箭头的配合效果并不好。主要问题是无论你放什么在这里，它都会重叠。

以下是我实现的例子。

首先，定义一个类，应用于 InputAdornment 元素上。你只需要给它一点右填充，以便它不会渲染在箭头上方：

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

然后只需将该类添加到您的中的中 <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>; 这将在装饰物右侧添加一些边距，以避免与选择箭头重叠。

- nachoargentina

---

与重叠不同，我的图标被覆盖了。因此，在HTML页面中，我的图标无处可寻，无法移动其位置。 - Mayank Jain

你是如何将装饰添加到你的选择器中的？你能把你的代码粘贴在这里，这样我就可以看一下并提供帮助吗？如果你尝试使用我上面发布的示例，它不应该被覆盖。 - nachoargentina

我不认为这是一个好的解决方案，因为现在我无法点击下拉菜单来展开列表。 - Vineeth Sai

Answer 2

我们可以使用<TextField>和其中的<MenuItem>，而不是使用<Select>。

<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

- Anil Sambasivan

---

这真的非常有帮助。不知为何，我一直在使用 endAdornment: {} 而不是 endAdornment: ()... 然而改变后问题得到了解决。谢谢。 - MwamiTovi

Answer 3

像本主题的其他答案一样，Material UI选择组件支持endAdornment和startAdornment，但是像其他人提到的那样，选择箭头会与其重叠。

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

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

然后，无论在哪里你有你的CSS，请包含：

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

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

- jz1995

Answer 4

当前的Material UI选择组件支持endAdornment，但是在选择箭头方面使用效果不佳。

我的做法是添加一个startAdornment并添加一个makeStyles类将其放置在绝对位置，makeStyles类的内容如下：

    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>
      }
    />

- javier

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>

- foreverAnIntern

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>

- Sumit Kumar Gupta

Answer 7

正如大家所说，Select对endAdornment的支持并不好。我发现最好的解决方法是使用绝对定位。这与javier的回答非常相似，但是重要的是将指针事件设置为"none"，这样装饰物就不会阻止用户与下拉箭头进行交互。以下是我的解决方案，使用内联样式：

 <Select
    value={value}
    label="Label"
    endAdornment={
        <InputAdornment 
          position="end" 
          sx={{ pointerEvents: "none", position: "absolute", right: 35 }}>
            adornment
        </InputAdornment>
    }
  >
    <MenuItem value={1}>1</MenuItem>
    <MenuItem value={2}>2</MenuItem>
</Select>

如果您的元素重叠，请调整选择框的宽度。

- Habbu

Answer 8

对于其他试图做到这一点的人 - 我还没有弄清楚如何做到，但一个可能足够好的解决方法是将您想要放在endAdornment中的所有内容放入右对齐的FormHelper中 - 这样它就会出现在表单字段中输入框下方。

- Mel