CODEWITHSUNDEEP
javascriptcssmaterial-uinext.jscss-modules
Ives E.
Ives E.

Reputation: 113

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

Upvotes: 1

Views: 1674

Answers (2)

ghostb0x
ghostb0x

Reputation: 31

JS is required for viewing CSS when running a local Next.js dev server.

Once the server side rendering is completed after running build, JS is not needed in production for the first render with styles. Next servers will send all HTML and CSS as pre-rendered static files.

Using their sample site at https://next-learn-starter.vercel.app/

With JS Enabled: enter image description here

With JS Disabled: enter image description here

Upvotes: 1

enoch
enoch

Reputation: 3123

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

Upvotes: 1

Related Questions