'Setting default backgroud color in nextjs react app
I want to set a default background color that will apply to all created pages in my project. I have tried the following tutorial: https://itnext.io/next-js-with-material-ui-7a7f6485f671 but it does not work and gives this error: Error
Here are my files:
Index.tsx file:
import LoginPage from "./login";
export default function Start() {
return (<div ><LoginPage></LoginPage></div>);
}
Login.tsx file
import Typography from "@mui/material/Typography"
import React from 'react';
import { makeStyles } from '@mui/styles';
import { Button, TextField } from "@mui/material";
const useStyles = makeStyles(theme => ({
root: {
display: "inline-grid",
margin: "auto",
position:"fixed",
top: "50%",
left: "50%",
width:"30em",
height:"18em",
marginTop: "-9em",
marginLeft: "-15em",
border: "1px solid #ccc",
},
loginButton: {
border: "1px solid #ccc",
width: "30%",
height: "80%",
margin: "auto"
},
loginText: {
margin: "auto"
}
}));
export default function LoginPage() {
const classes = useStyles();
return (
<>
<div className={classes.root}>
<Typography className ={classes.loginText}>Login</Typography>
<TextField id="filled-basic" label="Email Adresse" variant="standard"></TextField>
<TextField id="filled-basic" label="Passwort" variant="standard" />
<Button className={classes.loginButton}>Login</Button>
</div>
</>
);
}
useTheme.ts file:
import { createTheme } from "@mui/material/styles";
// Create a theme instance.
const theme = createTheme ({
palette: {
primary: {
main: '#556cd6',
},
secondary: {
main: '#19857b',
},
background: {
default: '#fff',
},
},
});
export default theme;
_app.tsx and _document.tsx are the same as in the tutorial provided in the link above
That's how my folder looks like with all files in
How can I fix the error that I am getting?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
