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