在反应 18 中使用 makeStyles Material UI 没有结果

嗨,我正在探索 ReactJs 和 Material UI,并且我正在学习过时的教程。我对这种材质 UI makestyles 有疑问,我该如何使用它?这是我使用的格式,没有结果。如您所见,我也更新了材质 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",
      },
    }));

应用程序.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>
stack overflow No result using makeStyles Material UI in react 18
原文答案

答案:

作者头像

样式.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",
      },
    }));
作者头像
import {styled } from "@mui/material";

const useStyles = styled((theme) => ({
  toolbarMargin: {
    ...theme.mixins.toolbar
  }
}));

const Header = () => {
  const classes = useStyles();
  return (
    <Fragment>
      <AppBar position="fixed">
        <Toolbar>
          <h1>Brand Name</h1>
          <Button variant="contained" color="error" sx={{ marginLeft: "auto" }}>
            Connect Wallet
          </Button>
        </Toolbar>
      </AppBar>
      <div className={classes.toolbar} />
    </Fragment>
  );
};
作者头像

这绝对能解决你的问题!

styles.js

❌import { makeStyles } from "@mui/material/styles"; // <--- delete this ❌

import { styled } from "@mui/system"; // <--- Add this ✅

❌export default makeStyles(() => ({ //  <--- delete this ❌

export default styled(()=>({ // <--- Add this ✅

  appBar: {
    borderRadius: 15,
    margin: "30px 0",
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
  heading: {
    color: "rgba(0,183,255, 1)",
  },
  image: {
    marginLeft: "15px",
  },
}));

原因:@mui/styles 包与 React 18 不兼容,如文档 - https://mui.com/system/styles/basics/ 中所示。您应该迁移到 @mui/system 并使用 styled()、sx 等,或者迁移到具有更接近 @mui/styles 的 API 的 tss-react。我希望这个解释可以帮助其他可能解决这个问题的人。

作者头像

@mui/styles 不再适用于 React 18

尝试这个:

import { styled } from "@mui/system";

export default styled(()=>({
  appBar: {
    borderRadius: 15,
    margin: "30px 0",
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
  heading: {
    color: "rgba(0,183,255, 1)",
  },
  image: {
    marginLeft: "15px",
  },
}));