Почему MuiThemeProvider переопределяет стиль компонента?

Question

У меня есть внешний компонент, который использует MuiThemeProvider:

<MuiThemeProvider theme={full_theme_e}>
    <div>
    <AppBar />
    <Filter />
    </div>
</MuiThemeProvider>

В моем компоненте фильтра я определяю собственный стиль:

const styles = {
  expansionPanel: {
    borderTopLeftRadius: 0,
    borderTopRightRadius: 0,
    borderBottomLeftRadius: 0,
    borderBottomRightRadius: 0,
  }
};

Применить к компоненту:

<ExpansionPanel className={classNames(classes.expansionPanel, className)}

И используйте стиль в моем экспорте:

export default withStyles(styles)(Filter);

Проблема в том, что мой пользовательский стиль перезаписывается MuiThemeProvider, почему?

Answer 1

const styles = {
  expansionPanel: {
    '&:first-child': {
      borderTopLeftRadius: 0,
      borderTopRightRadius: 0,
      borderBottomLeftRadius: 0,
      borderBottomRightRadius: 0,
    }
  }
};

То же самое для :last-child, :nth-child ...

Синтаксис для селекторов двоеточия CSS:

'&:[selector]': {
  ...
}