javascript - 在 react 18 中使用 makeStyles Material UI 没有结果

Question

您好，我正在探索 ReactJs 和 Material UI，我正在学习过时的教程。我对这种 Material UI makestyles 有疑问，我该如何使用它？这是我使用的格式，没有结果。如您所见，我也更新了 Material UI 导入

样式.js

import { makeStyles } from "@mui/material/styles";
    
    export default makeStyles(() => ({
      appBar: {
        borderRadius: 15,
        margin: "30px 0",
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
      },
      heading: {
        color: "rgba(0,183,255, 1)",
      },
      image: {
        marginLeft: "15px",
      },
    }));

App.js

import useStyles from "./styles";
    
    const App = () => {
      const classes = useStyles();
    
      return (
        <Container maxwidth="lg">
          <AppBar className={classes.appBar} position="static" color="inherit">
            <Typography className={classes.heading} variant="h2" align="center">
              Memories
            </Typography>
            <img
              className={classes.image}
              src={memories}
              alt="memories"
              height="60"
  

好吧，我可以在一个文件中使用样式，但我想在另一个文件(如 style.js)中创建样式以使其更清晰。

const App = () => {
  // const classes = useStyles();

  return (
    <Container maxwidth="lg">
      <AppBar
        style={{
          borderRadius: 15,
          margin: "30px 0",
          display: "flex",
          flexDirection: "row",
          justifyContent: "center",
          alignItems: "center",
        }}
        position="static"
        color="inherit"
      >
        <Typography variant="h2" align="center">
          Memories
        </Typography>
        <img src={memories} alt="memories" height="60" />
      </AppBar>

Answer 1

样式.js

    import { makeStyles } from "@mui/material/styles";
    
    export const useStyles =  makeStyles(() => ({
      appBar: {
        borderRadius: 15,
        margin: "30px 0",
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
      },
      heading: {
        color: "rgba(0,183,255, 1)",
      },
      image: {
        marginLeft: "15px",
      },
    }));