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?