css - 为什么MuiThemeProvider覆盖组件样式？

我有一个使用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覆盖，为什么？

最佳答案

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

与:last-child，:nth-child相同...

CSS冒号选择器的语法：

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