Q:

Why is the MuiThemeProvider overriding a component style? 

I have an outer component that uses MuiThemeProvider:
<MuiThemeProvider theme={full_theme_e}>
    <div>
    <AppBar />
    <Filter />
    </div>
</MuiThemeProvider>

In my filter component I define a custom style:
const styles = {
  expansionPanel: {
    borderTopLeftRadius: 0,
    borderTopRightRadius: 0,
    borderBottomLeftRadius: 0,
    borderBottomRightRadius: 0,
  }
};

Apply to the component:
<ExpansionPanel className={classNames(classes.expansionPanel, className)}

And use the style in my export:
export default withStyles(styles)(Filter);

The problem is my custom style gets overwritten by the MuiThemeProvider, why? 

A:

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

Same for :last-child, :nth-child...
Syntax for css colon selectors:
'&:[selector]': {
  ...
}

