为什么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]': {
  ...
}