Multiple withStyles only rendering the first

[Ehesp]

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?

[Ehesp]

Note: After upgrading to version 1.0.0, with a different syntax this problem still occurs.

[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())); },
};

[koistya]

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

[Ehesp]

Right makes sense, we were only taking the first item rather than the array of items. Cheers.

[adrianricardo]

@Ehesp what was the resolution?