Material-ui: [Autocomplete] Label Designs

[waynegrigsby]

I'm attempting to add some custom styles to the Autocomplete component but can't seem to change the label at all. I feel like I'm missing something. It seems to be different than the standard <TextField /> component. Apologies if this has been addressed somewhere, I haven't been able to find a solution.

Below is what I would normally do with a TextField component. This doesn't work with Autocomplete however...:

    '& .MuiFormLabel-root': {
      color: '#fff'
      }

Current Style with non-working label style change

const useStyles = makeStyles(theme => ({
  inputRoot: {
    color: '#fff',
    '& .MuiSvgIcon-root': {
      color: '#fff'
    },
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: '#fff'
    },
    '&:hover .MuiOutlinedInput-notchedOutline': {
      borderColor: theme.palette.primary.main
    },
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
      borderColor: theme.palette.primary.light
    },
    '& .MuiFormLabel-root': { <=== (Doesnt seem to work)
      color: '#fff'
      }
    },
  }
}))

Autocomplete component

      <Autocomplete
        multiple
        id='tags-outlined'
        classes={{ inputRoot: classes.inputRoot }}
        options={States}
        value={toggleStates || ''}
        getOptionLabel={(option) => option.name}
        defaultValue={toggleStates[0]}
        disableClearable
        filterSelectedOptions
        onChange={(event, newValue) => { handleChangeMiddle(newValue) }}
        renderInput={(params) => (
          <TextField
            {...params}
            variant='outlined'
            placeholder='Select'
            label='States'
          />
        )}
      />

[joshwooding]

In the future please provide a minimal reproducible example, something like a codesandbox demo will do.

The inputRoot class gets applied to the InputBase (the div wrapping the input). The label is outside this div hence the CSS isn't applied. There are multiple ways you can achieve this: you can apply the inputRoot class to the autocomplete root or directly to the rendered input using className.

[waynegrigsby]

Apologies, I'll make sure to add a codesandbox next time. Thank you for your response!