Wrong css injection order with multiple react apps

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Css injection order should be like this: App1 MUI CSS App1 overrides CSS App2 MUI CSS App2 overrides CSS

Current Behavior 😯

Css injection order is currently like this: App1 MUI CSS App1 overrides CSS App2 overrides CSS App2 MUI CSS

This is how it looks on Chrome devtools:

App on Chrome:

Steps to Reproduce 🕹

1. Create a page with 2 react apps that both use MUI
2. Create some custom styles on each app
3. View on the browser, only the first app overrides are visible

Your Environment 🌎

Tech	Version
Material-UI	v3.9.0
React	16.7.0
Browser	Chrome
TypeScript	3.3.0

App1 Code

import { Button, createGenerateClassName, createStyles, jssPreset, withStyles } from '@material-ui/core';
import { create } from 'jss';
import * as React from 'react';
import JssProvider from 'react-jss/lib/JssProvider';

const jss = (create as any)({ plugins: [...jssPreset().plugins] });

const generateClassName = createGenerateClassName({ productionPrefix: 'app1_' });

const styles = createStyles({
  button: {
    backgroundColor: 'blue',
  },
});

export const App = withStyles(styles)(({ classes }) => (
  <JssProvider jss={jss} generateClassName={generateClassName}>
    <Button className={classes.button}>App1</Button>
  </JssProvider>
));

App2 Code

import { Button, createGenerateClassName, createStyles, jssPreset, withStyles } from '@material-ui/core';
import { create } from 'jss';
import * as React from 'react';
import JssProvider from 'react-jss/lib/JssProvider';

const jss = (create as any)({ plugins: [...jssPreset().plugins] });

const generateClassName = createGenerateClassName({ productionPrefix: 'app2_' });

const styles = createStyles({
  button: {
    backgroundColor: 'red',
  },
});

export const App = withStyles(styles)(({ classes }) => (
  <JssProvider jss={jss} generateClassName={generateClassName}>
    <Button className={classes.button}>App1</Button>
  </JssProvider>
));

Example:

https://codesandbox.io/s/wyonzjzyw7

[gilamran]

I’ve managed to solve this by providing an insertionPoint for each app.

function createJss(appId: string) {
  const comment = `${appId}-jss-insertion-point`;
  const styleNode = document.createComment(comment);
  document.head.insertBefore(styleNode, document.head.firstChild);

  const jssOptions: JSSOptions = jssPreset();
  const plugins: ReadonlyArray<JSSPlugin> = [...jssOptions.plugins, rtl() as JSSPlugin];
  return create({...jssOptions, plugins, insertionPoint: comment});
}

If this is a good enough solution (Still not sure what’s the problem is), you can close this issue. And thanks for the fast response!

[oliviertassinari]

I’ve managed to solve this by providing an insertionPoint for each app.

@gilamran You are using two different JSS instances, it’s the correct solution 👍