@material/core issue

[skydrige]

@material/core issue

• Deprecated in React 18 use @mui/material/styles
• ThemeProvider, createRoot instead of ReactDOM.render

index.js

import React from 'react';
import { createRoot } from 'react-dom/client'; // Import createRoot
import App from './App';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({
    // Define your theme here
});

const root = createRoot(document.getElementById('root')); // Use createRoot
root.render(
    <React.StrictMode>
        <ThemeProvider theme={theme}>
            <App />
        </ThemeProvider>
    </React.StrictMode>
);

App.js

import React from 'react';
import { Container, Grow, Grid } from '@mui/material';
import memories from './images/memories.png';
import Posts from './components/Posts/Posts';
import Form from './components/Form/Form';
import { StyledAppBar, StyledTypography, StyledImage } from './styles.js';

const App = () => {
    return (
        <Container maxWidth="lg">
            <StyledAppBar position="static" color="inherit">
                <StyledTypography variant="h2" align="center">Memories</StyledTypography>
                <StyledImage src={memories} alt="memories" height="60" />
            </StyledAppBar>
            <Grow in>
                <Container>
                    <Grid container justifyContent="space-between" alignItems="stretch" spacing={3}>
                        <Grid item xs={12} sm={7}>
                            <Posts />
                        </Grid>
                        <Grid item xs={12} sm={4}>
                            <Form />
                        </Grid>
                    </Grid>
                </Container>
            </Grow>
        </Container>
    );
}

export default App;

styles.js

import { styled } from '@mui/material/styles';
import { Typography } from "@mui/material";

export const StyledAppBar = styled('div')(({ theme }) => ({
    borderRadius: 10,
    margin: '30px 0',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    fontSize: '30px',
    boxShadow: '0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)'
}));

export const StyledTypography = styled(Typography)({
    color: 'rgba(0,183,255, 1)',
});

export const StyledImage = styled('img')({
    marginLeft: '15px',
});

@skydrige