Select Component in material UI [duplicate] - reactjs

Question

I have a very simple select and when I click on the menu it shows 3 options, all on one-line each. However, when I select an item, it shows it on 2 lines: 1 line for the text and another for the icon. How do I make it so it is one line?
import "./styles.css";
import EditIcon from "#material-ui/icons/Edit";
import ListItemIcon from "#material-ui/core/ListItemIcon";
import ListItemText from "#material-ui/core/ListItemText";
import Select from "#material-ui/core/Select";
import FormControl from "#material-ui/core/FormControl";
import InputLabel from "#material-ui/core/InputLabel";
import MenuItem from "#material-ui/core/MenuItem";
import FormHelperText from "#material-ui/core/FormHelperText";
const items = ["a", "b", "c"];
export default function App() {
return (
<>
<FormControl>
<InputLabel>Please select an option</InputLabel>
<Select required defaultValue="hi" fullWidth>
{items.map((item, idx) => (
<MenuItem key={idx} value={item}>
<ListItemText primary={item} />
<ListItemIcon>
<EditIcon />
</ListItemIcon>
</MenuItem>
))}
</Select>
<FormHelperText>Just select something already</FormHelperText>
</FormControl>
</>
);
}
https://codesandbox.io/s/brave-stallman-9brmk?file=/src/App.js

Answer 1

The MenuItem layout is flex, while SelectInput is not, you can target the SelectInput using classes props and override the layout style like this:
See all possible rule names to override here.
<Select classes={{ select: classes.root }}
const useStyles = makeStyles({
root: {
display: "flex",
alignItems: "center"
}
});
Live Demo

Answer 2

You're using flex properties in .MuiListItemText-root and .MuiListItemIcon-root, but parent still has display: block. Your CSS for .MuiInputBase-input should look like this (changed display: block; to display: flex;):
.MuiInputBase-input {
font: inherit;
color: currentColor;
width: 100%;
border: 0;
height: 1.1876em;
margin: 0;
display: block;
padding: 6px 0 7px;
min-width: 0;
background: none;
box-sizing: content-box;
animation-name: mui-auto-fill-cancel;
letter-spacing: inherit;
animation-duration: 10ms;
-webkit-tap-highlight-color: transparent;
}