I'm currently facing a challenge where I need to add marginLeft of 8px to FormHelperText. However, I have not been successful in doing so within the MuiInput formControl rule or in MuiSelect.
Here is the React code snippet:
<FormControl error className={classes.margin} fullWidth>
<InputLabel className={classes.label} id="demo-error-select-label">
Error select
</InputLabel>
<Select
labelId="demo-error-select-label"
id="demo-error-select"
value={option}
onChange={handleChange}
IconComponent={() => <Icon24UtilityChevron component="select" height="20px" />}>
<MenuItem value="">Select</MenuItem>
<MenuItem value={1}>Option1</MenuItem>
<MenuItem value={2}>Option2</MenuItem>
<MenuItem value={3}>Option3</MenuItem>
</Select>
<FormHelperText>Error</FormHelperText>
</FormControl>
The following MuiSelect object overrides default styles using createMuiTheme (details omitted for brevity):
const MuiSelect = {
select: {
backgroundColor: selectColors.background,
padding: '12px 16px 12px 16px !important',
fontSize: '18px',
borderRadius: 12,
borderWidth: '1px',
borderStyle: 'solid',
borderColor: selectColors.border,
'&:focus': {
borderRadius: 12,
borderWidth: '2px',
borderStyle: 'solid',
borderColor: selectColors.borderFocus,
},
},
selectMenu: {
'&:hover:not(.Mui-disabled):not(.Mui-error)': {
backgroundColor: selectColors.hoverBackground,
},
},
};
The following MuiInput object also overrides default styles with createMuiTheme (details omitted for brevity):
This is an example of the FormControl being created (the Error label needs to be moved 8px to the left):
[![enter image description here][1]][1]
const MuiInput = {
formControl: {
'label + &': {
marginTop: '2px',
},
},
root: {
borderRadius: '12px',
borderColor: inputColors.inputBorder,
borderWidth: '1px',
borderStyle: 'solid',
'&$error': {
borderColor: inputColors.inputError,
},
'&:focus-within': {
borderColor: inputColors.inputBorderFocus,
},
'& svg': {
marginRight: '16px',
},
},
input: {
backgroundColor: inputColors.inputBackground,
caretColor: inputColors.inputCaret,
paddingLeft: '8px',
paddingRight: '8px',
color: inputColors.inputText,
borderRadius: '12px',
},
multiline: {
paddingTop: '0px',
paddingBottom: '0px',
},
underline: {
'&:hover:not(.Mui-disabled):before': { borderBottomWidth: '0px' },
'&:before': { borderBottomWidth: '0px' },
'&:after': { borderBottomWidth: '0px' },
},
};
You can refer to the visual example of the code (the lower error text is the one that requires the movement): https://i.stack.imgur.com/bBGQe.png