我正在做我的第一个Material UI - CSS Modules - Next.js项目。
问题：
当我在我的Chrome开发工具中禁用JS时，样式不会应用。现在，我不明白这是否与材料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
2条答案
按热度按时间mkshixfv1#
问题与您的代码无关
Next.js docs声明如下：
“如果禁用JavaScript，CSS仍将加载到生产构建中（下次启动）。在开发过程中，我们要求启用JavaScript，以便通过快速刷新提供最佳的开发人员体验。”
Doc reference
j7dteeu82#
在运行本地Next.js dev服务器时，需要JS来查看CSS。
一旦服务器端渲染在运行构建后完成，JS就不需要在生产中进行第一次渲染。接下来的服务器将发送所有HTML和CSS作为预呈现的静态文件。
使用他们的示例站点https://next-learn-starter.vercel.app/
启用JS：
禁用JS：
