时间戳

首页 > 解决方案 > NextJs/Material-ui 不尊重 makeStyles CSS

reactjs - NextJs/Material-ui 不尊重 makeStyles CSS

问题描述

我正在开发一个个人网站，在前面使用 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

我试图在页面上插入代码，但样式不正确。

标签： reactjsmaterial-uinext.js

解决方案

看来您刚刚开始使用 mui，我刚刚检查了您的来源，发现您没有正确初始化 mui 请访问此链接以在 Next.js @ https://github.com/mui-org中正确使用 material-ui /材料-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,
};

推荐阅读