Как отобразить значок рядом с элементом Select, не затеняя стрелку - PullRequest
Новая
       22

Как отобразить значок рядом с элементом Select, не затеняя стрелку

1 голос
/ 25 марта 2020

Я пытаюсь добавить значок помощи после ввода, как описано здесь . Это выглядит хорошо для элементов ввода. Я пытался сделать то же самое для элементов 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>

Есть идеи, как этого добиться?

1 Ответ

0 голосов
/ 25 марта 2020

Глядя на эту ветку выпуска - это, кажется, известная проблема, которую они в настоящее время не собираются исправлять.

Однако вы также можете найти эту быстрой и грязной там предложено исправить , а - вот как это можно применить к примеру, который вы предоставили в песочнице .

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