Material-ui: [styles] Simplify the server-side rendering API

[pheuter]

Expected Behavior

I should be able to pass a SheetsRegistry to <JssProvider> and it should be populated with styles generated from calls to makeStyles().

Current Behavior

SheetsRegistry is not populated with CSS from calls to makeStyles().

The SSR documentation is empty so this may be par for the course for the new @material-ui/styles package.

Your Environment

"@material-ui/core": "3.5.1",
"@material-ui/styles": "^3.0.0-alpha.0"

[oliviertassinari]

You do no longer need the JssProvider component. The server-side part API & documentation was left behind. We have had many reports that the current SSR setup is too complicated. I think that we should simplify it. It's the occasion. Now, if you don't want to wait for this effort, you can still make it work. It should be about using our StylesProvider component over JssProvider. (we server-side render our documentation website, it's definitely working).

[pheuter]

Got it, I'll take a look at using StylesProvider, thanks!

[pheuter]

Should we continue to use createMuiTheme from '@material-ui/core/styles' ? Doesn't seem like @material-ui/styles provides its own version.

[oliviertassinari]

@material-ui/styles is a standalone styling package. The theme must be imported from @material-ui/core.

[pheuter]

@oliviertassinari This distinction isn't super clear given that @material-ui/styles contains modules such as ThemeProvider. For this reason, having certain theming logic be split between the two packages may be confusing to the end user.

[eps1lon]

The ThemeProvider is used for a generic theme and is not specific to the theme shape used in @material-ui/core.

It's basically just a utility component that is both context consumer and provider in order to merge outer themes with the theme passed via props.

The distinction is made via ThemeProvider vs MuiThemeProvider naming.

[TroySchmidt]

I am experiencing an issue where we are transitioning to the hooks and finding that production class name generation is having overlap between the styles created from makeStyles and those done via the traditional withStyles() connector function to classes. There are two 'jss1', etc. classnames made. This is causing some really wacky behavior. Is this related?

[joshwooding]

@TroySchmidt see #13800

[lmachens]

@pheuter Could you manage to use makeStyles with SSR?
The sheetsRegistry only contains the custom styles but not the theme styles.

[Vincz]

I'm experiencing the same issue as @lmachens
I'm trying to do SSR with the new styles package @material-ui/styles but the sheet registry doesn't contains the base mui styles, only my custom styles.
Maybe we are using it the wrong way?

[lmachens]

I don't have this issue anymore. @Vincz you have to call install() before you import anything else.

https://material-ui.com/css-in-js/basics/#migration-for-material-ui-core-users

[Vincz]

Hey @lmachens, I tried but I still have the problem.
Maybe there is something I'm doing wrong ?

/********** MATERIAL UI INITIALIZATION **********/
import { install } from '@material-ui/styles';

install();
import { ThemeProvider, StylesProvider, createGenerateClassName } from '@material-ui/styles';

import { create, SheetsRegistry } from 'jss';
import jssPreset from 'jss-preset-default';
import theme from '../shared/theme/theme.js';

/********** MATERIAL UI INITIALIZATION **********/

import configureStore from './configureStore';
import Html from './HTML';
import App from '../shared/App';
import createApolloClient from '../shared/apollo';

...
and for each request
....
const sheetsRegistry = new SheetsRegistry();
const sheetsManager = new Map();
const jss = create(jssPreset());
const generateClassName = createGenerateClassName();

const app = (
<StylesProvider
    jss={jss}
    sheetsRegistry={sheetsRegistry}
    sheetsManager={sheetsManager}
    generateClassName={generateClassName}
>
    <ThemeProvider theme={theme}>
         <App />                
    </ThemeProvider>
</StylesProvider>
)

const content = renderToString(app);
const cssJss = sheetsRegistry.toString();  <-- only contains my custom styles

And after this, I only get my custom styles in cssJss. I don't get all the MuiButtonBase, etc...

[joshwooding]

@Vincz ECMAScript will hoist the imports above your install() it’s recommended to move it to a separate file and import the file when you want to bootstrap @material-ui/styles. (https://material-ui.com/css-in-js/basics/#migration-for-material-ui-core-users)

[lmachens]

How to you bundle your app?
You should put it in a separate file.
My webpack config:

{
  entry: {
    client: ['startup/bootstrap.ts', 'startup/client/index.ts']
  },
  ...
}

bootstrap.ts:

// https://material-ui.com/css-in-js/basics/#migration-for-material-ui-core-users
import { install } from '@material-ui/styles';
install();

[Vincz]

You were right guys! I isolated the install into is own file and everything is working as expected now!
Thank you !