Menu
I'm developing a personal website using NextJS and MAterial-UI in the front and Strapi in the back. However, while I'm writing my code and saving, sometimes the CSS that I wrote under the const 'useStyles=makeStyles' is not repected. I don't know weather is a NextJS or a Material-UI problem.
Check the examples below:
CSS respected:
CSS not respected (note that the justify-content and also the search input have no CSS):
The code is available here. https://github.com/augustomallmann/personal/blob/main/frontend/src/components/Header.jsx
I tried to insert the code on the page, but it was not getting styled properly.
453
It seems you just got started with mui, I just checked your source and found you didn't initialize mui properly please visit this link for proper use of material-ui in Next.js @ 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,
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
