'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