javascriptcssmaterial-uinext.jscss-modules

Material UI, CSS Modules, Next.js: why is style not applied when JS is disabled?

I'm working on my first Material UI - CSS Modules - Next.js project.

Problem:
When I disable JS in my chrome dev tools, the style is not applied. Now, I don't understand if this has something to do with Material UI? Or maybe with the way I'm importing styles?

I couldn't find any answer by now. Any help is appreciated. Thanks a lot!!

Here is some relevant code:

//pages/_document.js
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/core/styles';
import theme from './_theme';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta name="theme-color" content={theme.palette.primary.main} />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
  };
};



//pages/_app.js
import React from "react";
import "../styles/global.css";
import { ThemeProvider } from "@material-ui/core/styles";
import theme from "./_theme";
import CssBaseline from "@material-ui/core/CssBaseline";

function MyApp({ Component, pageProps }) { 
  React.useEffect(() => {
    const jssStyles = document.querySelector("#jss-server-side");
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);
  
  return (
    <>
      <ThemeProvider theme={theme}>
        <CssBaseline>
              <Component {...pageProps} />
        </CssBaseline>
      </ThemeProvider>
    </>
  );
}

export default MyApp;



//componentXYZ.js -> I import styles like this
import Input from "@material-ui/core/Input"; //from material ui
import styles from "./componentXYZ.module.css //other styles

Solution

  • The problem is not related to your code

    The Next.js docs states this :

    "If you disable JavaScript the CSS will still be loaded in the production build (next start). During development, we require JavaScript to be enabled to provide the best developer experience with Fast Refresh."

    Doc reference