JSS plugins customisation and global styles [@next]

@oliviertassinari sorry to bother… I’m trying to apply global rules I have defined in a NPM package @damianobarbati/jss-reset to the app but I don’t find in the docs how to directly use the jss instance MUI is using. Docs say Material-UI is using the jss-preset-default module. You can always add new plugins if needed: but how? 🤔

I also tried to apply globals in a random app component:

const styleSheet = createStyleSheet('List', theme => ({
    '@global': {
        body: {
            margin: 0,
            padding: 0,
        },
    },
    root: {

And I tried to apply globals in the theme creation:

const theme = createMuiTheme({
    '@global': {
        body: {
            margin: 0,
            padding: 0,
        },
    },

Does not seem to work.

For reference I’m using this in an another app (react-jss@latest ~ 1.7):

import React from 'react';
import ReactDOM from 'react-dom';

import { create as createJss } from 'jss';
import { JssProvider } from 'react-jss';
import preset from 'jss-preset-default'
import reset from '@damianobarbati/jss-reset';
//const App = blablabla
const jss = createJss(preset());
jss.createStyleSheet(reset).attach();

ReactDOM.render(<JssProvider jss={jss}><App /></JssProvider>, document.getElementById('app'));

[richburdon]

OK figured it out (often takes writing an issue to do that). @damianobarbati this might be useful to you but I’m sure you’ve figured it out already. You don’t need to use customs JSS.

Add @global defs to a style (not theme) then style your root element.

const styles = (theme) => ({
  '@global': {
    'a': {
      'color': 'red' .    // Make all links red.
    }
  }
});

const Main = (props) => {
  return (
    <a>Hello</a>
  );
}

const AppRoot = (props) => {
  return (
    <MuiThemeProvider theme={ theme }>
      <Main/>
    </MuiThemeProvider>
  );
};

const AppRootWithStyles = withStyles(styles)(AppRoot);

ReactDOM.render(<AppRootWithStyles/>, document.getElementById(rootId));

[corytheboyd]

@oliviertassinari

You gonna need to do something like:

Please add this example code to the documentation for Customization > CSS in JS. It mentions the JssProvider but does not mention how it fits into the MuiThemeProvider at all.