[英]Material UI is not working properly with Next.js
These are the problems I faced with Next.js and Material UI, even though I am following the methods mentioned in Material UI docs.这些是我在使用 Next.js 和 Material UI 时遇到的问题,尽管我遵循了 Material UI 文档中提到的方法。
makeStyles
:makeStyles
一起使用,我会收到此错误: I am getting if I pass state as props如果我将状态作为道具传递,我就会得到
const useStyles = makeStyles((theme: Theme) => ({
root: {
background: "#EFEFEF",
minHeight: (props: any) => (props.open ? "150vh" : "100vh"),
},
},
}));
const Profile = () => {
const [open, setOpen] = useState(false);
const classes = useStyles({ open });
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div className={classes.root}>
<Layout authRoute={false} showNavbar={false}>
<Container maxWidth="lg">
<Header method={method} />
<div className={classes.btnContainer}>
<Button
variant="contained"
color="secondary"
className="yesBtn"
onClick={handleOpen}>
<IoMdCheckmark />
Yes
</Button>
<Button
variant="contained"
color="default"
className="noBtn"
onClick={() => router.push("/")}>
<TiDeleteOutline />
No
</Button>
</div>
<ProfileModal handleClose={handleClose} open={open} />
</Container>
</Layout>
</div>
);
};
export default Profile;
theme.breakpoints.down("sm")
).theme.breakpoints.down("sm")
)。export const useButtonStyle = makeStyles(theme => ({
submitBtn: {
padding: "12px 16px",
borderRadius: theme.shape.borderRadius,
position: "absolute",
bottom: "25%",
display: "block",
left: "0%",
right: "0%",
width: "83.5%",
margin: " auto",
[theme.breakpoints.down("xs")]: {
bottom: "35%",
width: "88%",
},
"& .MuiButton-label": {
display: "flex",
justifyContent: "center",
alignItems: "center",
"& .MuiCircularProgress-root": {
height: "20px",
width: "20px",
marginRight: "10px",
},
},
},
root: {
position: "relative",
backgroundColor: theme.palette.secondary.dark,
minHeight: "100vh",
[theme.breakpoints.up("sm")]: {
padding: "2rem 0.2rem",
"& .overlay": {
display: "none",
},
},
[theme.breakpoints.down("sm")]: {
"& .MuiContainer-root": {
paddingLeft: "0",
paddingRight: "0",
},
},
},
}));
Here is _document.tsx
file这是
_document.tsx
文件
import Document, { Html, Head, Main, NextScript } from "next/document";
import { ServerStyleSheets } from "@material-ui/styles";
class MyDocument extends Document {
static async getInitialProps(ctx: any) {
const sheet = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App: any) => (props: any) =>
sheet.collect(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
ctx.renderPage(sheet);
}
}
render() {
return (
<Html>
<Head>
<link
rel="shortcut icon"
type="image/png"
href="../static/favicon.ico"
/>
<style>{`body { margin: 0 } /* custom! */`}</style>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
</Head>
<body className="custom_class">
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
This is _app.tsx
file这是
_app.tsx
文件
import { ApolloProvider } from "@apollo/client";
import CssBaseline from "@material-ui/core/CssBaseline";
import { ThemeProvider } from "@material-ui/core/styles";
import Head from "next/head";
import React from "react";
import theme from "../src/theme";
import "../styles/styles.scss";
import { withApollo } from "../src/utils/apollo";
import App from "next/app";
class MyApp extends App<any> {
componentDidMount() {
const jssStyles = document.querySelector("#jss-server-side");
if (jssStyles) {
jssStyles.parentElement!.removeChild(jssStyles);
}
}
render() {
const { Component, pageProps, apolloClient } = this.props;
return (
<>
<Head>
<title>Beauty wall spot</title>
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width"
/>
</Head>
<ThemeProvider theme={theme}>
<CssBaseline />
<ApolloProvider client={apolloClient}>
<Component {...pageProps} />
</ApolloProvider>
</ThemeProvider>
</>
);
}
}
export default withApollo(MyApp);
Similar issues.类似的问题。 MUI Icons not rendering and/or makeStyles intermittently rendering
MUI 图标不呈现和/或 makeStyles 间歇呈现
Install 'npm install @mui/styles'安装'npm install @mui/styles'
Then Import: import { makeStyles } from '@mui/styles';然后导入: import { makeStyles } from '@mui/styles';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.