java 在react 18中使用makeStyles材质UI没有结果

6ss1mwsb 于 2023-02-07 发布在 Java

关注(0)|答案(5)|浏览(121)

你好，我正在探索ReactJs和Material UI，我正在使用过时的教程。我对这个材质UI makestyles有问题，我该如何使用它？这是我正在使用的格式，没有结果。正如你所看到的，我也更新了材质UI导入

styles.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>

Java

来源：https://stackoverflow.com/questions/71948818/no-result-using-makestyles-material-ui-in-react-18

5条答案

按热度按时间

hl0ma9xz1#

styles.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",
      },
    }));

赞(0）回复(0）举报 2023-02-07

up9lanfz2#

这一定会解决你的问题!

- 样式. 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不兼容，如文档-Documentation所示。

您应该迁移到*@mui/system * 并使用styled（）、sx等，
sx prop 〉SX Props Docs MUI的文档

sx props -> property is used like inline styling.
for example : 
 <Box
        sx={{
          bgcolor: 'background.paper',
          boxShadow: 1,
          borderRadius: 2,
          p: 2,
          minWidth: 300,
        }}
      >
    
 </Box>

或 * 迁移 * 到ts-react
其具有更接近****@mui/styles * 的API。
我希望这个解释对其他可能遇到这个问题的人有所帮助。

赞(0）回复(0）举报 2023-02-07

ngynwnxp3#

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

赞(0）回复(0）举报 2023-02-07

332nm8kg4#

*@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",
  },
}));

赞(0）回复(0）举报 2023-02-07

vqlkdk9b5#

您可以从tss-react而不是从MUI导入makeStyles
根据：www.example.comhttps://github.com/mui/material-ui/issues/32881#issuecomment-1135051663

赞(0）回复(0）举报 2023-02-07