Material-ui: Some CSS prop styles from emotion.js are not applied while SSR is present with Next.js

Created on 20 Jul 2019 · 2Comments · Source: mui-org/material-ui

[x] This is not a v0.x issue.
[x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

All the styles from the CSS prop should be considered important

Current Behavior 😯

In index.js some of the following styles are not being applied:

<Button
  css={css`
    background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
    border-radius: 15px; // not applied
    border: 0;
    color: white; // not applied
    height: 48px;
    padding: 0 30px; // not applied
    box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
  `}
>

Steps to Reproduce 🕹

Link:

Go to https://codesandbox.io/s/emotion-nextjs-material-ui-4lfz9
You'll see the custom styles from <Button> switch from white font with padding to no padding and black.
If you set to !important all the missing styles, it works, _but this shouldn't be the case_, that's the bug imo.

Context 🔦

I'm trying to use emotion.js, next.js and material-ui together. I've grown used to use emotion.js for quite a while and instead of doing the components my self I want to try material-ui to save some time, while trying to do so found that the styles are not totally applied.

Your Environment 🌎

"@emotion/core": "10.0.14",
"@material-ui/core": "4.2.1",
"@material-ui/styles": "4.2.1",
"babel-plugin-emotion": "10.0.14",
"next": "9.0.2",
"react": "16.8.6",
"react-dom": "16.8.6"
"Browser: Firefox/Chrome"

discussion

Source

fillipvt

Most helpful comment

So I found this in the docs and I might've solved my own question, but I'm not totally sure if I'm implementing it correctly.

In app.js:

import { StylesProvider } from "@material-ui/styles";

// ...
      <Container>
        <Head>
          <title>My page</title>
        </Head>
        <ThemeProvider theme={theme}>
          <StylesProvider injectFirst> // added this
            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
            <CssBaseline />
            <Component {...pageProps} />
          </StylesProvider>
        </ThemeProvider>
      </Container>

Here's the codesandbox https://codesandbox.io/s/emotion-nextjs-material-ui-2-ypuh4

My question here would be, is it good practice to use StylesProvider in app.js and inside ThemeProvider?

Cheers

PD: Sorry I created an unnecessary issue, didn't delete it because I think it might help someone in the future

fillipvt on 20 Jul 2019

🚀1 🎉1 😄1 👍1

All 2 comments