我刚开始使用 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] 属性“调色板”,“间距”在类型 ‘DefaultTheme’ 上不存在”,因为 makeStyles 的导出方式不同它不知道主题。似乎有一个片段可以放入打字稿项目(我没有运行,我正在使用 javascript)并且有一个部分可以将 ts 文件添加到我的 javascript 并放入它推荐的片段,我试过了,但是我错过了一些东西,因为它没有做任何事情,我不确定是否需要在我的 App.js 文件中放一些东西才能让它读取?
原文由 Natsuko Izuki 发布,翻译遵循 CC BY-SA 4.0 许可协议
您仍然可以使用
makeStyles
utils 作为您正在使用的工具,但是在材料 v5 中,如果您喜欢这样做,您需要再安装一个包@mui/styles
和https://mui.com/guides/migration-v4/#mui-material-styles
此外,如果需要,您还需要添加
tab
和purple
到createTheme