Can anyone help me understand why the Select label is misplaced in MUI5?
https://i.sstatic.net/gvqff.png
This is the Textfield label:
https://i.sstatic.net/zrgqF.png
This is the Select label:
https://i.sstatic.net/GspRC.png
Here is the code snippet:
export const SelectItem = (
{
id,
name,
value,
options,
label,
placeholder,
variant
}: ISelectItem
) => {
const {setFieldValue} = useFormikContext();
const [field, meta] = useField(name);
const handleChange = (event: SelectChangeEvent) => {
const {value} = event.target;
setFieldValue(name, value);
};
const configFormControl: IConfigFormControl = {};
if (meta && meta.touched && meta.error) {
configFormControl.error = true;
configFormControl.errorText = meta.error;
}
const helperText = configFormControl.errorText;
return (
<FormControl
fullWidth={true}
variant={variant as any}
error={configFormControl.error}
>
{label
? <InputLabel id={`select-item-${name}-id`}>{label}</InputLabel>
: null
}
<Select
labelId={`select-item-${name}-id`}
id={id}
label={label}
onChange={handleChange}
{...field}
>
{
options.map((option: ISelectOption, index: number) =>
<MenuItem key={index} value={option.Value}>{option.Label}</MenuItem>
)
}
</Select>
{helperText
? <FormHelperText>{helperText}</FormHelperText>
: null
}
</FormControl>
);
};
I have tried using both the Select itself and the <Textfield select ... />, but the dropdown label remains 3px below its correct position.
This is the current theme being used:
import {createTheme} from '@mui/material/styles';
const DEFAULT_MODAL_HEADER_BG_COLOR = '#021e29';
export const getTheme = (colors) => {
return createTheme({
palette: {
primary: {
main: colors.primary,
contrastText: `${colors.buttonText}!important`
},
secondary: {
main: colors.secondary,
contrastText: `${colors.buttonText}!important`
}
},
components: {
// Component styles here
}
});
};If anyone has any ideas on how to fix this issue, I would greatly appreciate your help. Thank you!