找不到名称"类"。TS2304？

Question

我想在react Mui上自定义我的appbar大小(目前使用v4，但每次尝试创建样式时都会出错。

我当前的代码

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

如果希望自定义主题，则需要使用ThemeProvider组件将主题注入应用程序。必须使用makeStyles创建样式，然后可以创建变量classes，并在jsx中使用className而不是style。如果你不仅想自定义Navbar，还想自定义所有组件，你可以在index.js 中设置ThemeProvider

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>
)
}