如何在不遮挡箭头的情况下在 Select 元素旁边显示图标答案

【问题标题】：How to display an icon next to a Select element without obscuring the arrow如何在不遮挡箭头的情况下在 Select 元素旁边显示图标
【发布时间】：2020-07-06 05:41:15
【问题描述】：

我正在尝试在输入后添加一个帮助图标，如here 所述。 Input 元素看起来不错。我尝试对 Select 元素执行相同的操作，但它搞砸了 Select 的向下箭头，如 this codesandbox

所示

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select-adornment"
  value={age}
  onChange={handleChange}
  endAdornment={
    <InputAdornment position="end">
      <HelpOutline />
    </InputAdornment>
  }
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

关于如何实现这一点的任何想法？

【问题讨论】：

标签： reactjs material-ui react-material

【解决方案1】：

看看这个issue thread - 这似乎是一个他们目前不打算修复的已知问题。

但是，您也可以在此处找到建议的 quick and dirty fix 和 here is how it can be applied to the example you provided in the sandbox。

tl;dr：您可以使用 position: "relative" 覆盖选择图标样式：

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  },
  selectIcon: {
    position: "relative"
  }
}))

...

 <Select
    labelId="demo-simple-select-label"
    id="demo-simple-select-adornment"
    value={age}
    onChange={handleChange}
    classes={{
       icon: classes.selectIcon //overriding the select-icon style
       }}
     endAdornment={
         <InputAdornment position="end">
            <HelpOutline />
          </InputAdornment>
          }
      >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
  </Select>

【讨论】：