Matreial ui is not loading Styles and Theme? - reactjs

Question

I am trying to use this ready free templet for a login page the problem is the source code is different and I had to adapt it to work there is this issue with this import in the src code
#mui/material/
the I had to convert to
#material-ui/
for it to work..
but the problem is my page looks like the following no colors and the theme didn't load for some reason the sx is not working any idea what is the issue here and why the src code is different yet working ?
A. source code
B. material-ui free template view
Source Singup page
My Signup page rendered on next.js localhost
import React from 'react';
import Avatar from '#material-ui/core/Avatar';
import Button from '#material-ui/core/Button';
import CssBaseline from '#material-ui/core/CssBaseline';
import TextField from '#material-ui/core/TextField';
import FormControlLabel from '#material-ui/core/FormControlLabel';
import Checkbox from '#material-ui/core/Checkbox';
import Link from '#material-ui/core/Link';
import Grid from '#material-ui/core/Grid';
import Box from '#material-ui/core/Box';
import LockOutlinedIcon from '#material-ui/icons/LockOutlined';
import Typography from '#material-ui/core/Typography';
import Container from '#material-ui/core/Container';
import { createTheme, ThemeProvider } from '#material-ui/core/styles';
function Copyright(props) {
return (
<Typography variant='body2' color='text.secondary' align='center' {...props}>
{'Copyright © '}
<Link color='inherit' href='https://material-ui.com/'>
Your Website
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
const theme = createTheme();
function SignIn() {
const handleSubmit = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
// eslint-disable-next-line no-console
console.log({
email: data.get('email'),
password: data.get('password'),
});
};
return (
<ThemeProvider theme={theme}>
<Container component='main' maxWidth='xs'>
<CssBaseline />
<Box
sx={{
marginTop: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
<LockOutlinedIcon />
</Avatar>
<Typography component='h1' variant='h5'>
Sign in
</Typography>
<Box component='form' onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
<TextField margin='normal' required fullWidth id='email' label='Email Address' name='email' autoComplete='email' autoFocus />
<TextField margin='normal' required fullWidth name='password' label='Password' type='password' id='password' autoComplete='current-password' />
<FormControlLabel control={<Checkbox value='remember' color='primary' />} label='Remember me' />
<Button type='submit' fullWidth variant='contained' sx={{ mt: 3, mb: 2 }}>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link href='#' variant='body2'>
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href='#' variant='body2'>
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</Box>
</Box>
<Copyright sx={{ mt: 8, mb: 4 }} />
</Container>
</ThemeProvider>
);
}
export default SignIn;

Answer 1

Try to use yours TextField with InputProps with color: "inherit"
<TextField
margin='normal'
required
fullWidth
id='email'
label='Email
Address'
name='email'
autoComplete='email'
autoFocus
InputProps={{
style: {
color: "inherit"
}
}}
/>