javascript makeStyles for Material UI v.5的替代方案是什么

sirbozc5  于 2023-02-28  发布在  Java
关注(0)|答案(5)|浏览(106)

我刚开始使用材质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属性的文章,也通过材质UI的文档听说过样式化(),但是我很难将它应用到我编写的代码中,希望能朝着正确的方向推进。
为了编辑我之前的内容,我也要添加我的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] Property“palette”,“spacing”在类型'DefaultTheme'上不存在,因为makeStyles以不同的方式导出,并且它不知道主题。似乎有一个代码段要放入打字脚本项目中(我没有运行,我正在使用JavaScript)并且有一个部分可以在我的JavaScript中添加一个TS文件,并放入它推荐的片段,我试过了,但是我是否因为它没有做任何事情而遗漏了一些东西,我不确定是否需要在App.js文件中放置一些东西才能让它读取这些内容?

b91juud3

b91juud31#

你仍然可以使用makeStyles工具,但是在materials 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',
    },
  },
})
jdgnovmf

jdgnovmf2#

基于documentation
@mui/styles是MUI的传统样式解决方案。在v5中已弃用。它依赖于JSS作为样式解决方案,而JSS在@mui/material中已不再使用。
您可以使用the-sx-propstyled

fiei3ece

fiei3ece3#

所以我从这个问题中理解的是你想要添加自定义类到material-ui组件.并且makestyles给你关于主题的错误..你可以通过提供默认主题到makestyles来解决这个问题.你可以使用ThemeProvider来做这个..你所要做的就是用createTheme创建一个默认主题(),然后在ThemeProvider中使用它将其传递给树中ThemeProvider下的所有组件。只需使用ThemeProvider Package 根组件,它将为当前使用的每个makeStyle提供默认主题。

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

gijlo24d4#

import * as React from 'react';
import { StyledEngineProvider } from '@mui/material/styles';

export default function GlobalCssPriority() {
  return (
    <StyledEngineProvider injectFirst>
      {/* Your component tree. Now you can override MUI's styles. */}
    </StyledEngineProvider>
  );
}

您需要先使用主文件上的提供程序获取默认样式。
访问此处材料UI注射!

w41d8nur

w41d8nur5#

@mui/styles与React严格模式或React18不兼容。

建议使用the sx props

import * as React from 'react';
import { Box } from '@mui/system';

export default function BasicUsage() {
  return (
    <Box
      component= 'div'
      sx={{
        color: 'darkslategray',
        backgroundColor: 'aliceblue',
        padding: 8,
        borderRadius: 4,
      }}
    >
      Styled div
    </Box>
  );
}


您可以使用@mui/system package或@mui/material/styles package中的styled()函数,如果没有创建主题,则不同之处在于这些包中使用的默认主题。

import * as React from 'react'; 
import { styled } from '@mui/system';
     
const MyComponent = styled('div')({   
  color: 'darkslategray',  
  backgroundColor: 'aliceblue',   
  padding: 8,   
  borderRadius: 4, 
});
     
export default function BasicUsage() {   
  return <MyComponent>Styled div</MyComponent>;
}

相关问题