Material-UI change margin of FormHelperText when FormControl only for Select

Question

I currently need to add marginLeft of 8px to FormHelperText. But havent been able to do it on the MuiInput formControl rule or in MuiSelect.

This is the React code:

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

This is the MuiSelect object that override default styles with createMuiTheme (ommited for briefly explanation):

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

This is the MuiInput object that override default styles with createMuiTheme (ommited for briefly explanation):

This is an example of the FormControl being created (need to move the Error label 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' },
  },
};

Take a look at the visual example of the code (the lower error text is the one that needs to be moved):

Answer 1

I could solve it by using ~ selector. Code:

const MuiInput = {
  formControl: {
    'label + &': {
      marginTop: '2px',
    },
    '& ~ p': {
      marginTop: '4px',
      marginLeft: '8px',
    },
  },
...