Cannot find name 'classes'. TS2304? - reactjs

Question

I want to customize my appbar size on react Mui(currently using v4, but I get an error everytime I try to create a style.
My current Code
import React from "react";
import { AppBar, Toolbar, Typography, Box, makeStyles } from '#material-ui/core';
import { Link } from "react-router-dom";
import './Navbar.css'
const styles ={
customizeToolbar: {
minHeight: 36
}
};
function Navbar(){
return(
<AppBar position='sticky' >
<Toolbar variant='dense' style={classes.customizeToolbar} >
</Toolbar>
</AppBar>
)
}
export default Navbar;

Answer 1

import React from "react";
import { AppBar, Toolbar, Typography, Box, makeStyles } from '#material-ui/core';
import { Link } from "react-router-dom";
import './Navbar.css'
const styles ={
customizeToolbar: {
minHeight: 36
}
};
function Navbar(){
return(
<AppBar position='sticky' >
<Toolbar variant='dense' style={styles.customizeToolbar} >
</Toolbar>
</AppBar>
)
}
export default Navbar;

Answer 2

If you wish to customize the theme, you need to use the ThemeProvider component in order to inject a theme into your application. You must create styles with makeStyles, then you can create variable classes and use it in jsx with className not style. If you want customize not only Navbar but all components you can set ThemeProvider in index.js
import { createTheme, ThemeProvider } from '#mui/material/styles';
import { createStyles, makeStyles } from '#mui/styles';
const useStyles = makeStyles(() =>
createStyles({
customizeToolbar: {
minHeight: 36
}
})
);
const theme = createTheme();
function Navbar(){
const classes = useStyles();
return(
<ThemeProvider theme={theme}>
<AppBar position='sticky' >
<Toolbar variant='dense' className={classes.customizeToolbar} >
</Toolbar>
</AppBar>
</ThemeProvider>
)
}