Multiple withStyles only rendering the first

I asked this on Gitter originally, but I’m struggling to get the following to work (example):

import appStyles from './App.scss`;
import otherStyles from '../OtherComponent/otherStyles.scss';

...

export default withStyles(App, appStyles, otherStyles);

This doesn’t throw any errors, and both the styles are within the styles array, only the appStyles are loaded in.

Is this the correct way of going about this?

[koistya]

I guess, we need to create <StylesContext> (or <StylesProvider>) React component, that can be used to set insertCss context variable…

[frenzzy]

Your context insertCss function should handle all style arguments rather than just one, for example:

// client.js
const context = {
  insertCss(...styles) { styles.forEach(style => style._insertCss()); },
};

// server.js
const css = [];
const context = {
  insertCss(...styles) { styles.forEach(style => css.push(style._getCss())); },
};