Material UI v.5 的 makeStyles 的替代品是什么

我刚开始使用 Material UI 版本 5。最初要使用自定义主题的样式,我会使用 makestyles,但似乎在 v.5 中不起作用。我的主题在它们自己的组件上,为了导入它们,我使用了 {createTheme} 而不是旧的 {createMuiTheme} 。我像往常一样将我的主题导入到父组件中,并将其设置为 <ThemeProvider theme{theme}></ThemeProvider>

现在,在我的另一个组件上,我再次尝试使用 useStyles,但它不起作用,因为它没有在版本 5 中使用。我很难弄清楚如何转换它以便它可以用于版本 5。这是我正在处理的一些未完成的代码:

const useStyles = makeStyles((theme) => ({
    logo: {
        height: "8em",
        marginLeft: "0.2em",
    },
    tabContainer: {
        marginLeft: "auto",
    },
    tab: {
        ...theme.typography.tab,
        minWidth: 10,
        marginRight: "50px",
        opacity: 1,
        "&hover": {
            color: theme.palette.common.purple,
            textDecoration:"none",
        },
    },
}));

export default function Navigation(props) {
    const classes = useStyles();

    const [value, setValue] = useState(0);

    const handleChange = (e, value) => {
        setValue(value);
    };
    const refreshPage = () => {
        window.location.reload();
    };

    useEffect(() => {
        switch (window.location.pathname) {
            case "/":
                if (value !== 0) {
                    setValue(0);
                }
                break;
                default:
                break;
        }
    }, [value]);

    return (
      <React.Fragment>
        <ElevationScroll>
          <AppBar
            position="relative"
            style={{
              borderBottom: "2px solid black",
            }}
          >
            <Toolbar disableGutters>
                <img src={logo} alt="nasa logo" className={classes.logo}/>
                <Typography variant="h1" style={{ textAlign: "center" }}>
                  Nasa<br></br>Photos
                </Typography>
                <Tabs
                  value={value}
                  onChange={handleChange}
                  className={classes.tabContainer}
                  indicatorColor="primary"
                >
                  <Tab
                    className={classes.tab}
                    component={Link}
                    onClick={refreshPage}
                    to="/"
                    label="Home"
                  />
                </Tabs>
            </Toolbar>
          </AppBar>
        </ElevationScroll>
      </React.Fragment>
    );
}

我已经阅读了有关 xs 属性的信息,并且我还通过 Material UI 的文档听说了 styled(),但是我很难将它应用到我编写的代码中,并且希望朝着正确的方向前进。

所以要编辑我之前的内容,我还要添加我的 Theme.js 文件。我认为这已正确完成,但它又没有读取我的选项卡或调色板。

import {createTheme} from "@mui/material/styles";

const pink = "#FFC0CB";
const lightblue = "#ADD8E6";
const purple = "#800080";
const black = "#000000";

const theme = createTheme({
    palette: {
        common: {
            pink: pink,
            lightblue: lightblue,
            purple: purple,
            black: black
        },
        primary: {
            main: pink,
            mainGradient: "linear-gradient(to left, purple, pink)",
        },
        secondary: {
            main: lightblue,
            mainGradient: "linear-gradient(to right, lightblue, pink)"
        },
    },
    typography: {
        tab: {
            fontFamily:"Orbitron",
            textTransform: "none",
            fontSize: "2.5rem",
            color: black,
        },
        h1: {
            fontFamily: "Orbitron",
            fontSize: "2.5em"
        },
        h2: {
            fontFamily: "Orbitron",
            fontSize: "2.5em"
        },
        subtitle1: {
            fontFamily: "Orbitron"
        },
        subtitle2: {
            fontFamily: "Orbitron",
            fontSize: "1.5rem"
        },
        buttons: {
            fontFamily: "Orbitron",
            textTransform: "none"
        },
    },
});

export default theme

我已经将我的主题导入到我的顶级文件 App.js 文件中,我将在此处包含它,以防万一出现问题:

import React,{useState} from "react";
import PicOfDay from "./Components/PictureOfDay";
import Navigation from "./Components/Navigation";
import {
  Typography,
} from "@mui/material";
import {ThemeProvider} from '@mui/material/styles'
import theme from "../src/ui/Theme";
import {BrowserRouter as Router} from "react-router-dom";

function App(props) {
  const [date, setDate] = useState(new Date());
  return (
    <ThemeProvider theme={theme}>
      <Router>
        <Navigation date={date} setDate={setDate} />
        <Typography
          variant="h1"
          style={{fontSize: "5rem", textAlign: "center", marginTop:"2rem"}}
          >
            Astronomy Picture of the Day
        </Typography>  
        {/* <PicOfDay date={date} /> */}
      </Router>
    </ThemeProvider>
  );
}

export default App;

我确实看过你们中的一些人发给我的一些文档,我正在查看故障排除部分,上面写着“[Types] 属性“调色板”,“默认主题”类型上不存在“间距”,因为 makeStyles 的导出方式不同它不知道主题。似乎有一个片段可以放入一个打字稿项目(我没有运行,我正在使用 javascript),并且有一个部分可以将一个 ts 文件添加到我的 javascript 并放置它推荐的片段,我试过了,但是我我错过了一些东西,因为它没有做任何事情,我不确定是否需要在我的 App.js 文件中放入一些东西才能读取它?

stack overflow What is the alternative of makeStyles for Material UI v.5
原文答案

答案:

作者头像

您仍然可以使用 makeStyles 实用程序,但在材料 v5 中,如果您喜欢这样做,您需要再安装一个包 @mui/styles

import { makeStyles } from '@mui/styles';

https://mui.com/guides/migration-v4/#mui-material-styles

makeStyles JSS 实用程序不再从@mui/material/styles 导出。您可以改用@mui/styles/makeStyles。

此外,如果需要,您需要将 tabpurple 添加到 createTheme

const theme = createTheme({
  typography: {
    tab: {
      fontSize: 20,
    },
  },
  palette: {
    common: {
      purple: 'purple',
    },
  },
})
作者头像

基于 documentation

@mui/styles 是 MUI 的传统样式解决方案。它在 v5 中已弃用。它依赖于 JSS 作为样式解决方案,@mui/material 中不再使用它。

您可以使用 the-sx-propstyled

作者头像

因此,我从这个问题中了解的是,您要在材料-UI组件中添加自定义类。Makestyles为您提供了关于主题的错误。您可以通过向Makesty提供默认主题来解决此问题。您可以使用theaseprovider来做到这一点。.您要做的就是使用createTheme()创建一个默认的主题这将为当前正在使用的每个Makesty提供默认主题。

import { makeStyles } from '@mui/styles';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme();

 const useStyles = makeStyles((theme) => (
 root : {
   background: theme.palette.primary.main,
 }));

 function Component() {
   const classes = useStyles();
   return <div className={classes.root} />
 }

 // In the root of your app
 function App(props) {

 return <ThemeProvider theme={theme}><Component {...props} /></ThemeProvider>;
 }