Material ui 材质UI-选择带有末端装饰的菜单

是否可以在MaterialUI中的选择菜单中设置尾饰

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

尾饰={
(
{选定的.map（（值）=>(
))}
)}
MenuProps={MenuProps}
>
{field.map（（field）=>(
{field}
))}

对于其他尝试这样做的人-我还不知道如何做，但一个可能足够好的解决方法是将EndAdorment中需要的所有内容放置在右对齐的FormHelper中-以便它显示在表单字段的输入框下方。

当前的材质Ui选择组件支持EndAdorment，但是，它不能很好地与选择箭头配合使用

我所做的是添加StartDornment并添加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>
  }
/>

这行吗

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

{values.map（（值）=>(
{value}
))}

我接受了Javier的回答，但风格有点不同。正如他所提到的，Material UI

Select

组件支持

EndAdormination

，但是，它与

Select

箭头不太配合。主要的问题是，无论你放在那里，它都会重叠。 下面是我如何做到这一点的一个例子

首先，定义一个将应用于

inputadornation

元素的类。您只需给它一点正确的填充，这样它就不会在箭头上方渲染：

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


挑选
{rowData.listValues？.map（（值：any，i:any）=>{
返回{value.label}；
})}

这将使装饰有一点右边空白，以避免与选择箭头重叠。
我们可以使用
而不是
，其中包含

<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>
  );


项目1
项目2
项目3
);

请参见示例沙箱示例，而不是重叠。我的被推翻了。所以在html页面中找不到我的图标来改变它的位置。你是如何将addorment添加到你的Select中的？你能把你的代码粘贴在这里吗？这样我就可以看一下并提供帮助了？如果您尝试使用我在上面发布的示例，它不应被覆盖，