NextJs/Material-ui not respecting makeStyles CSS

user_10481527 0
Viewed 8029

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: enter image description here

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

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.

material-ui next.js reactjs
3 Answers

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,
};
user_124903860

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()
   }
  }
 }
user_60805670

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.

user_18765550
Related