NextJs/Material-ui not respecting makeStyles CSS

Question

I'm developing a personal website using NextJS and MAterial-UI in the front and Strapi in the back. However, while I'm writing my code and saving, sometimes the CSS that I wrote under the const 'useStyles=makeStyles' is not repected. I don't know weather is a NextJS or a Material-UI problem.

Check the examples below:

CSS respected:

CSS not respected (note that the justify-content and also the search input have no CSS):

The code is available here. https://github.com/augustomallmann/personal/blob/main/frontend/src/components/Header.jsx

I tried to insert the code on the page, but it was not getting styled properly.

Is your current code in your git directory working ? Thanks

aa bb
– aa bb

2021-08-05 18:17:38 +00:00
Commented Aug 5, 2021 at 18:17 — aa bb
– aa bb, Commented Aug 5, 2021 at 18:17

Chukwuemeka Maduekwe · Accepted Answer · 2020-12-13 23:02:59Z

10

It seems you just got started with mui, I just checked your source and found you didn't initialize mui properly please visit this link for proper use of material-ui in Next.js @ https://github.com/mui-org/material-ui

import React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from '../src/theme';

export default function MyApp(props) {
  const { Component, pageProps } = props;

  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>My page</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
      </Head>
      <ThemeProvider theme={theme}>
       {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </React.Fragment>
  );

}

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired,
};

answered Dec 13, 2020 at 23:02

Chukwuemeka Maduekwe

8,7627 gold badges61 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Augusto Mallmann Over a year ago

Wow! Yes, this is my very first project haha. Thank you very much! You helped a lot

Chukwuemeka Maduekwe Over a year ago

yes, you're welcome. I always happy to help

Prabhu · Accepted Answer · 2020-12-14 03:31:43Z

In Next.js 10.0.3 version we have to use Material-Stylesheets for SSR in _document.js and appropriate style loaders in next.config.js . Im using Material-ui and i faced the same issue and added the code below...For me it resolved the issue. Hope this will resolve your issue.

next.config.js

module.exports = withImages({
target: '//your target',
webpack: function (config, { webpack }) {
    config.module.rules.push({
        test: /\.(eot|svg|gif|md)$/,
        loaders: ['style-loader', 'css-loader', 'less-loader']
    })
   
    return config
},
})

_document.js

 import React from 'react'
 import NextDocument from 'next/document'
 import { ServerStyleSheet as StyledComponentSheets } from 'styled-components'
 import { ServerStyleSheets as MaterialUiServerStyleSheets } from '@material- 
 ui/styles'

 export default class Document extends NextDocument {
   static async getInitialProps(ctx) {
   const styledComponentSheet = new StyledComponentSheets()
   const materialUiSheets = new MaterialUiServerStyleSheets()
   const originalRenderPage = ctx.renderPage

  try {
  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: App => props =>
        styledComponentSheet.collectStyles(
          materialUiSheets.collect(<App {...props} />),
        ),
    })

  const initialProps = await NextDocument.getInitialProps(ctx)

  return {
    ...initialProps,
    styles: [
      <React.Fragment key="styles">
        {initialProps.styles}
        {materialUiSheets.getStyleElement()}
        {styledComponentSheet.getStyleElement()}
      </React.Fragment>,
    ],
    }
   } finally {
     styledComponentSheet.seal()
   }
  }
 }

Emi · Accepted Answer · 2021-06-29 09:38:47Z

2

I followed this example repo mentioned in the docs.

Basically you need to create a pages/_document.js file with this code.

Here you can see how the theme-color is used, but you can remove the line related to the theme if you don't care about it.

edited Jun 29, 2021 at 9:38

answered Jun 21, 2021 at 15:57

Emi

5,1152 gold badges36 silver badges40 bronze badges

1 Comment

Atav32 Over a year ago

Links now point to 404 or legacy docs

Collectives™ on Stack Overflow

NextJs/Material-ui not respecting makeStyles CSS

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related