apply style on mui autocomplete using styled Components

I try to change the input box background and shape i did some tests with red color but i cannot apply any color its like autocomplete don't listen

const StyledAutoComplete = styled(Autocomplete)`
& MuiAutocomplete-tag {
  background: green
}

`;
<StyledAutoComplete
        disablePortal
        id="search_form"
        options={locations}
        getOptionLabel={(option: object) => option.city}
        renderOption={(props, option) => (
          <li {...props}>{`${option.city}, ${option.country}`}</li>
        )}
        sx={{ width: 300 }}
        renderInput={(params) => (
          <CustomTextField {...params} label="Choose a country" />
        )}
      />

1 answer

  • answered 2022-05-04 10:37 Marcin

    Try changing:

    & MuiAutocomplete-tag {
    

    to

    & .MuiAutocomplete-tag {
    

    (dot is missing) :)

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum