Encountering an issue with aligning a label with a dropdown in material UI, and for some reason, this behavior is observed: https://i.sstatic.net/n7pj8.png
Struggling to get them aligned on the same row.
This is the code snippet of my component:
const useStyles = makeStyles(theme => ({
root: {
justifyContent: 'center',
display: 'flex',
},
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
}));
function DutPreferencesTab(props) {
const classes = useStyles()
const {data} = props
console.log(data)
const [age, setAge] = React.useState('');
const handleChange = (event) => {
setAge(event.target.value);
};
return (
<div style={{display: 'flex', direction: 'row'}}>
<CustomLabel text={'Relay:'} variant={"subtitle1"} />
<FormControl className={classes.formControl}>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
)
}
CustomLabel.js
import React from 'react'
import Typography from '@material-ui/core/Typography';
import clsx from 'clsx';
function CustomLabel({text, variant, styles}) {
return (
<div className={clsx(styles)}>
<Typography variant={variant} gutterBottom>
{text}
</Typography>
</div>
)
}
export default CustomLabel
Tried various solutions but unable to align them on the same row. The issue seems to be specific to dropdowns as other texts are aligned perfectly with the label. Any insights on what could be missing?
Appreciate any help!