Material UI、CSS Modules、Next.js：为什么禁用 JS 时不应用样式？答案

【问题标题】：Material UI, CSS Modules, Next.js: why is style not applied when JS is disabled?Material UI、CSS Modules、Next.js：为什么禁用 JS 时不应用样式？
【发布时间】：2021-05-06 12:32:51
【问题描述】：

我正在开发我的第一个 Material UI - CSS Modules - Next.js 项目。

问题：
当我在我的 chrome 开发工具中禁用 JS 时，不会应用该样式。现在，我不明白这是否与 Material UI 有关？或者也许是我导入样式的方式？

我现在找不到任何答案。任何帮助表示赞赏。非常感谢！！

以下是一些相关代码：

//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

【问题讨论】：

标签： javascript css material-ui next.js css-modules

【解决方案1】：

问题与你的代码无关

Next.js 文档说明了这一点：

“如果您禁用 JavaScript，CSS 仍会在生产构建中加载（下次启动）。在开发过程中，我们需要启用 JavaScript 以通过快速刷新为开发人员提供最佳体验。”

Doc reference

【讨论】：