NextJs/Material-ui 不尊重 makeStyles CSS
Posted
技术标签:
【中文标题】NextJs/Material-ui 不尊重 makeStyles CSS【英文标题】：NextJs/Material-ui not respecting makeStyles CSS 【发布时间】：2021-03-24 12:40:28 【问题描述】：我正在开发一个个人网站，在前面使用 NextJS 和 MAterial-UI，在后面使用 Strapi。但是，当我编写代码并保存时，有时我在 const 'useStyles=makeStyles' 下编写的 CSS 不被尊重。我不知道天气是 NextJS 还是 Material-UI 的问题。
查看以下示例：
尊重 CSS：
CSS 不被尊重（注意 justify-content 和搜索输入没有 CSS）：
代码可在此处获得。 https://github.com/augustomallmann/personal/blob/main/frontend/src/components/Header.jsx
我尝试在页面上插入代码，但样式不正确。
【问题讨论】：
您的 git 目录中的当前代码是否有效？谢谢 【参考方案1】：我关注了this example repo 提到了in the docs。
基本上你需要用this code创建一个pages/_document.js文件。
Here你可以看到theme-color是如何使用的，但是如果你不关心它，你可以删除与主题相关的行。
【讨论】：
【参考方案2】：在 Next.js 10.0.3 版本中，我们必须在 _document.js 中为 s-s-r 使用 Material-Stylesheets，并在 next.config.js 中使用适当的样式加载器。我使用 Material-ui，我遇到了同样的问题并添加了下面的代码......对我来说它解决了这个问题。希望这能解决您的问题。
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()
【讨论】：
【参考方案3】：看来你刚刚开始使用 mui，我刚刚检查了你的源，发现你没有正确初始化 mui 请访问此链接以在 Next.js 中正确使用 material-ui @ 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,
;
【讨论】：
哇！是的，这是我的第一个项目哈哈。非常感谢！你帮了很多忙 是的，不客气。我总是乐于提供帮助 如果您愿意，您可以对解决方案进行投票以显示它有帮助以上是关于NextJs/Material-ui 不尊重 makeStyles CSS的主要内容，如果未能解决你的问题，请参考以下文章