(Styling): How to join multiple selectors and give them the same attributes inside of sx-CodePudding

I am trying to add them both in one line (join the selectors together, but it did not work: I tried .MuiAutocomplete-popupIndicator .MuiAutocomplete-popupIndicatorOpen, tried nesting objects, and some other things, but none of them worked.

  <Autocomplete
  disablePortal
  options={[1, 2, 3]}
  sx={{
    width: 1,
    '.MuiAutocomplete-popupIndicator': {
      bgcolor: 'transparent',
      mr: 2,
    },
    '.MuiAutocomplete-popupIndicatorOpen': {
      bgcolor: 'transparent',
      mr: 2,
    },
  }}
  renderInput={params => <TextField {...params} />}
/>

How can I join multiple selectors and give them the same attributes?

CodePudding user response：

Applying the styles like this

<Autocomplete 
        disablePortal
        options={[1, 2, 3]}
        sx={{
          width: 1,
          '& .MuiAutocomplete-popupIndicator, &.MuiAutocomplete-popupIndicatorOpen': {
            bgcolor: 'transparent',
            mr: 2,
          }
        }}
        renderInput={params => <TextField {...params} />}
      />

CodePudding user response：

Depends of what exactly you want to achieve, but you definitely need to use the & sign:

<Autocomplete
  disablePortal
  options={[1, 2, 3]}
  sx={{
    width: 1,
    '& .MuiAutocomplete-popupIndicator': {
      bgcolor: 'transparent',
      mr: 2,
    },
    '& .MuiAutocomplete-popupIndicatorOpen': {
      bgcolor: 'transparent',
      mr: 2,
    },
  }}
  renderInput={params => <TextField {...params} />}
/>

Or like this, applying the styles no matter of Autocomplete open state:

<Autocomplete
      disablePortal
      options={[1, 2, 3]}
      sx={{
        width: 1,
        '& .MuiAutocomplete-popupIndicator': {
          bgcolor: 'transparent',
          mr: 2,
        }
      }}
      renderInput={params => <TextField {...params} />}
    />

Edit
This is absolutely redundant, because the .MuiAutocomplete-popupIndicator selector is one level above and includes completely the .MuiAutocomplete-popupIndicatorOpen selector in itself, in the code there is nothing that is specific for the open state that is different from the closed state, so there is no reason for this additional selector...