Material-ui: JSS plugins customisation and global styles [@next]

[damianobarbati]

@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'));

[oliviertassinari]

First thing, @global should be working out of the box with the default config as we use it for the docs.

And I tried to apply globals in the theme creation:

Applying it to the theme won't do anything.

Material-UI is using the jss-preset-default module. You can always add new plugins if needed

You gonna need to do something like:

import { create } from 'jss';
import { createStyleManager } from 'jss-theme-reactor/styleManager';
import jssPreset from 'jss-preset-default';

const styleManager = createStyleManager({
  theme,
  jss: create(jssPreset()),
}); 

<MuiThemeProvider styleManager={styleManager} />

Let me know if that work for you.

[damianobarbati]

Thanks @oliviertassinari, this was fast and flawless!

[damianobarbati]

@oliviertassinari any change to apply here because of last update?
I'm seeing all of my classnames renamed weirdly and this solution is causing some glitch around 🤔
Example of what's happening now with custom styleManager:

//before
secondaryActionIcon: "Nav-secondaryActionIcon-2058329623"
subList: "Nav-subList-717760748"
//after
secondaryActionIcon: "secondaryActionIcon-0-169"
subList: "subList-0-168"

[oliviertassinari]

You have some wrong dependency versions. #7461 will allow us to be up to date (we are behind jss by two major version right now).

[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.

[richburdon]

@oliviertassinari can you give an example. E.g., with your JSS example above how would one style all <a> tags in an application. Steep learning curve to absorb MUI and then JSS and all the rest when trying to build something :). The docs aren't clear to me.

E.g., none of below addresses global styles (classes):
https://material-ui-next.com/customization/themes/#configuration-variables

Also your link above (https://github.com/mui-org/material-ui/blob/v1-alpha/docs/src/components/AppFrame.js#L32) 404s.

Thanks.

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

const AppRoot = (props) => {
return (

);
};

const AppRootWithStyles = withStyles(styles)(AppRoot);

ReactDOM.render(, document.getElementById(rootId));
~~~~