Material UI doesn't render anything

Viewed 32

I tried adding a navbar to my website but react does not render a thing. I tried making a new project and that did not work either. Also stackoverflow prevents posts that are mostly code I do not know why this is a thing.

My App.js

import Navbar from "./components/Navbar";
import Container from "@mui/material/Container"


function App() {
  return (
     <Container>
         <Navbar></Navbar>
     </Container>
  );
}

export default App;

My index.js

import React from 'react';
import ReactDOM from 'react-dom/client';


import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

import './index.css';
import App from './App';

let darkTheme = createTheme({
    palette: {
        mode: 'dark',
    },
});


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

);

I'm using

"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@mui/icons-material": "^5.10.3",
"@mui/material": "^5.10.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
1 Answers

I downgraded react and react-dom to version 17.0.2. This solved the problem.

Related