question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Material UI wont add styles on refreshing

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:17 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
akhileshacccommented, Apr 8, 2020

@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…

1reaction
akhileshacccommented, Dec 3, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Material-UI breaks after refreshing - Stack Overflow
My problem is that the styling on the site completely breaks whenever I press the reloading button on the browser. Is this normal...
Read more >
Frequently Asked Questions - Material UI - MUI
Possible reasons · You have another @mui/styles library somewhere in your dependencies. · You have a monorepo structure for your project (e.g, lerna,...
Read more >
@mui/styles (LEGACY) - MUI System
@mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the @mui/material...
Read more >
Working with Tailwind CSS - MUI Base
Learn how to style MUI Base components with Tailwind CSS. ... create a file called Player.tsx and add the markup below, which includes...
Read more >
Accordion API - Material UI - MUI
API reference docs for the React Accordion component. Learn about the props, CSS, and other APIs of this exported module.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found