[docs] className order or specificity

[gfpacheco]

If I have a component A with some styles using CSS-in-JS, that can receive a className prop like this:

function A({ classes, className }) {
  return <div className={classNames(classes.root, className)} />;
}

And another component B that uses component A:

function B({ classes }) {
  return (
    <div className={classes.root}>
      <A className={classes.a} />
    </div>
  );
}

The thing is: the B classes are being added to the dom before A classes, and since they're all a single class selector the last one have higher priority.

Is there a right way of handle this?

[oliviertassinari]

I'm not sure to follow, how is this related to Material-UI? A reproduction example would be much better. You can use codesandbox or webpackbin :). The only specificity logic we have in Material-UI is right here: withStyles.js.

[gfpacheco]

I was trying to build a component for Material-UI, I don't know how to reproduce it in a simple example, but let's try with this.

Is there any way of making the A component stylesheet definition have higher priority over the one received by props?

[oliviertassinari]

Yes, you can with the index property. We should document it.

-export default withStyles(styles)(A);
+export default withStyles(styles, {
+  index: 0,
+})(A);

[oliviertassinari]

I have improved the documentation