如何在 Material UI 的多选中与 startAdornment 一起显示标签？答案

【问题标题】：How to show a label together with startAdornment in Multiple Select in Material UI?如何在 Material UI 的多选中与 startAdornment 一起显示标签？
【发布时间】：2020-04-16 22:55:03
【问题描述】：

我将 Select 与 multiple 道具一起使用。该组件工作正常，InputLabel 呈现以下内容：

但是，当我通过 startAdornment 属性在开头添加图标时，InputLabel 会移到输入字段上方。

你知道在没有选择值时如何在图标旁边显示标签吗？

代码是：

 <FormControl className={classes.formControl} fullWidth variant="outlined" size="medium">
    <InputLabel name={name} color="secondary" variant="outlined" htmlFor={id} id={id} className={classes.label}>{label}</InputLabel>
    <Select
      name={name}
      labelId={id}
      id={id}
      multiple
      autoWidth
      startAdornment={icon}
      color="secondary"
      value={selectedValues}
      onChange={handleChange}
      renderValue={selectedOptions => (
        <div className={classes.tags}>
          {selectedOptions.map(option => (
            <Chip key={option.value} label={option.label} size="small" className={classes.chipStyle} />
          ))}
        </div>
      )}

    >
      {options.map(option => (

        <MenuItem key={option.value} value={option}>
          <Checkbox checked={logicHere} color="primary" />
          <ListItemText primary={option.label} />
        </MenuItem>
      ))}
    </Select>
  </FormControl>

【问题讨论】：

侧节点：所需的行为由material design itself 定义 - 请参阅“带有前导图标的概述下拉菜单”。所以，要么我不明白如何正确使用该组件，要么这是一个错误
您是否将icon 包裹在InputAdornment 中？在他们的demo of text fields 中，他们在其周围添加了一个InputAdornment 组件
是的，我试过startAdornment={ <InputAdornment position="start"> {icon} </InputAdornment> } 还是一样
这是一个已知的错误。它的问题在这里：github.com/mui-org/material-ui/issues/13898

标签： material-ui multiple-select

【解决方案1】：

你试过了吗？

<Select 
InputProps={{
    startAdornment: <InputAdornment position="start">Kg</InputAdornment>,
}} />

【讨论】：