【问题标题】: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 fixhere 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>
    

    【讨论】:

      猜你喜欢
      • 2012-03-09
      • 1970-01-01
      • 2022-11-18
      • 2015-01-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-07-08
      • 1970-01-01
      相关资源
      最近更新 更多