I cannot give the flex feature to the menuItem inside the select element

Question

I have a selector component that I will flag with to select the language option. But the picture I added does not seem to be centered from top to bottom. For this, it is enough to give displayI flex to MenuItem. But I can't write again. Why not?

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

score 0 · Answer 1 · answered Apr 16 '20 at 14:26

When I couldn't do it with that method, I made the look I wanted with another solution. In that

      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;
      }```

I cannot give the flex feature to the menuItem inside the select element

1 Answers1