How to target this sepecific MUI default class

Question

I want to target this class which is applied to a <AccordionSummary> component which It has <CustomTextField> component inside of it's expandIcon property.

I've tried this but not worked:

<AccordionSummary
  sx={{
    '& .MuiButtonBase-root.MuiAccordionSummary-root.Mui-focusVisible': {
      backgroundColor: 'transparent'
    }
  }}
  id='panel-header-1'
  aria-controls='panel-content-1'
  expandIcon={
    <Box sx={{ rowGap: 2, display: 'flex', flexWrap: 'wrap', alignItems: 'center' }}>
      <CustomTextField
        value={value}
        sx={{ mr: 4 }}
        placeholder='Search Product'
        onChange={e => handleFilter(e.target.value)}
      />
      <Button onClick={toggleAccordion} variant='contained'>
        Filter
      </Button>
    </Box>
  }
></AccordionSummary>

Answer 1

You can customize theme to achieve this.

const theme = createTheme({
  palette: {
    mode: 'light',
  },
  components: {
    MuiAccordionSummary: {
      styleOverrides: {
        root: {
          '&.Mui-focusVisible': {
            backgroundColor: 'transparent',
          },
        },
      },
    },
  },
});