Why do absolutely all elements disappear when styling in react?

Question

React

I’m just learning React. When styling elements, everything on the screen disappears. I follow the guide, I can’t understand why the code is not correct. Everything works without styling.
The code:

import React from 'react';
import './App.css';
import { AppBar, Button, Container , IconButton, Toolbar, Typography,Box, Paper, Grid} from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import { makeStyles } from '@mui/styles';
import { typography } from '@mui/system';

const useStyles = makeStyles((theme)=>({
 root: {
   flexGrow: 1
 },
 
 title: {
   flexGrow:1
 },
 mainFeaturesPost:{
   position:"relative",
   color:theme.palette.common.white,
   marginBottom:theme.spacing(4),

   backgroundSize:"cover",
   backgroundRepeat:"no-repeat",
   backgroundPosition:"center"
 },
 mainFeaturesPostContent:{
   position:"relative",
   padding:theme.spacing(3),
 }
}))