Я не могу дать функцию flex для menuItem внутри элемента select - PullRequest
Новая
       28

Я не могу дать функцию flex для menuItem внутри элемента select

0 голосов
/ 16 апреля 2020

У меня есть компонент селектора, с которым я буду отмечать, чтобы выбрать язык. Но картинка, которую я добавил, кажется, не по центру сверху вниз. Для этого достаточно дать displayI flex для MenuItem. Но я не могу написать снова. Почему нет? 

```
import styles from './index.module.scss';
import Turkey from '../../icons/languages/Turkey_flat.png';
import En from '../../icons/languages/United-Kingdom_flat.png';
import Germany from '../../icons/languages/Germany_flat.png';


const LanguageSelect = props => {
  const { className, onChange, style, ...rest } = props;

  const [language, setLanguage] = React.useState("TR");


  const handleLanguageChange = event => {
    setLanguage(event.target.value);
  };

  return (
    <Select
      classes={{
        root: styles[`language-select`]
      }}
      value={language}
      onChange={handleLanguageChange}
      autoWidth
    >
      <MenuItem className={styles['display']} value="TR"> <img className={styles['language-select-flag']} src={Turkey}/>Türkçe</MenuItem>
      <MenuItem value="ENG"><img className={styles['language-select-flag']} src={En}/>İngilizce</MenuItem>
      <MenuItem value="DE"><img className={styles['language-select-flag']} src={Germany}/>Almanca</MenuItem>

    </Select>
  );
};

LanguageSelect.propTypes = {
  className: PropTypes.string,
  onChange: PropTypes.func,
  style: PropTypes.object
};

export default LanguageSelect;


index.scss
----
```
.display{
  display: flex!important;
}
```

[enter image description here][1]


  [1]: https://i.stack.imgur.com/rLKMO.png

1 Ответ

0 голосов
/ 16 апреля 2020

Когда я не мог сделать это с помощью этого метода, я сделал то, что хотел, с другим решением. В этом 

      classes={{
        root: styles[`language-select`]
      }}
      value={language}
      onChange={handleLanguageChange}
      autoWidth
    >
      <MenuItem value="TR">
        <ListItemIcon>
          <img className={styles['language-select-flag']} src={Turkey}/>
          <ListItemText>Türkçe</ListItemText>
        </ListItemIcon>
      </MenuItem>
      <MenuItem value="ENG">
        <ListItemIcon>
          <img className={styles['language-select-flag']} src={En}/>
          <ListItemText>İngilizce</ListItemText>
        </ListItemIcon>
      </MenuItem>
      <MenuItem value="DE">
        <ListItemIcon>
          <img className={styles['language-select-flag']} src={Germany}/>
          <ListItemText>Almanca</ListItemText>
        </ListItemIcon>
      </MenuItem>

    </Select>````

css edit

``` flag{
        width: 20px;
        height: 20px;
        margin: auto 4px;
      }```
...