Nit, but this might be better:

const classNames = `${styles.arrowPlacement} ${by < 0 ? styles.arrowLeft : styles.arrowRight} ${isDisabled ? styles.arrowDisabled : ''}`;

Just looking for good patterns here since we'll be doing this quite a bit.

Done.

I'm in favor of a classnames like helper lib going forward. Would transform this to the much clearer:

const  classNames = cx(
    styles.arrowPlacement,
    by < 0 ? styles.arrowLeft : styles.arrowRight,
    {[styles.arrowDisabled]: isDisabled}
)

I liked your idea of putting this into the base-carousel.jss.js because:

1. It removes the danger of misusing the style objects.
2. It makes it really obvious where to find useStyles styles.
3. Limits the react-jss import to only one type of module.
4. Simplifies rewriting conceptually - only one type of module is rewritten. It could also make rewriting slightly more difficult technically, but I think it's a good tradeoff.
5. Also, down the line I'd like a lint that only allows react-jss and jss to be imported in a .jss.js modules.

Here's an idea. Let's actually create the useStyles() fake in the .jss.js file. It'd simply look like this:

export function useStyles() {
  return classes;
}

Then we can do a couple of things:

1. All component modules would look exactly like we want them to look. When build step is ready, none of them would need to change.
2. We can shield classes export and thus reduce public surface of the jss file.

I wish I had thought of this. on it!

Per suggestion about exporting fake useStyles. We can use that same fake to exist this code. And as soon as the build step is complete, it all becomes unneeded.

Much happier with this approach.

Question: Do we prefer using classes.arrowDisabled for more precise specificity, or would we prefer defining a CSS rule for ${classes.arrowPlacement}[disabled]? With the second approach we would also append disabled={isDisabled} as the prop.

good question. not sure

Here's my quick 2 cents on this. The most purist CSS way is .x:disabled {} - but that's not always applicable. The other options are .x[disabled] {} and .x.x-disabled {}. The important considerations here are:

1. The most important thing for us here is specificity. And all .x:disabled, .x[disabled] and .x.x-disabled all have exactly the same specificity (https://specificity.keegan.st/). So no clear winners there. However, the special case we can make .x-disabled {} that would include combined styles. This will have a lower specificity. But, I think this is a rare case where a lower specificity is actually harmful. I think the combined selector is a good thing.
2. .x[disabled] IMHO "feels" more semantic and self-documenting. But this is potentially less visible inside a component.
3. .x.x-disabled is faster, though in this case shouldn't be too big of a difference.
4. .x.x-disabled is slightly repetitive. We still need to add the disabled and aria-disabled attributes.

I think the bigger answer is that there's no a clear winner here. We can keep moving with a class and reassess/change later since these are fully compatible options due to the same specificity.