react-starter-kit: Material UI wont add styles on refreshing

First, I am not sure how to exactly add Material UI support. I added by doing this in client.js

<App context={context} insertCss={insertCss}>
        <MuiThemeProvider>
          <CssBaseline />
          {route.component}
        </MuiThemeProvider>
      </App>

Please tell whats the right way to integrate material UI. Material UI applies styles well when server starts. But at next refresh none of styles defined inside component are applied. I apply component wise styles using.

const useStyles = makeStyles(theme => ({
  root: {
    color: 'red',
  },
})

export function example() {
const classes = useStyles()
return (
<div className={classes.root}> Hello</>
)
}

Please help.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 17 (1 by maintainers)

Most upvoted comments

@piglovesyou Thanks for the help ❤️. It worked.

@akhileshacc Hello, Did you just add the theme in the App file or did you follow the documentation of material Ui?

I added the theme in App.js and made changes to server.js to include server side rendering things. A part of server.js looks like this

  ........
  ........
const data = { ...route };
    const sheets = new ServerStyleSheets();
    const rootComponent = sheets.collect(
      <App context={context} insertCss={insertCss}>
        {route.component}
      </App>,
    );
    await getDataFromTree(rootComponent);
    // this is here because of Apollo redux APOLLO_QUERY_STOP action
    await Promise.delay(0);
    data.children = await ReactDOM.renderToString(rootComponent);
    data.styles = [{ id: 'css', cssText: [...css].join('') }];
    data.muiStyles = sheets.toString();

    const scripts = new Set();
    const addChunk = chunk => {
      if (chunks[chunk]) {
        chunks[chunk].forEach(asset => scripts.add(asset));
      } else if (__DEV__) {
        throw new Error(`Chunk with name '${chunk}' cannot be found`);
      }
    };
    addChunk('client');
    if (route.chunk) addChunk(route.chunk);
    if (route.chunks) route.chunks.forEach(addChunk);
    data.scripts = Array.from(scripts);
  ........
  ........

Hope it helps…

akhileshacc on Apr 8, 2020

@piglovesyou Thanks for the help ❤️. It worked.

akhileshacc on Dec 3, 2019