我刚开始使用材质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文件中放置一些东西才能让它读取这些内容?
5条答案
按热度按时间b91juud31#
你仍然可以使用
makeStyles
工具,但是在materials v5中,如果你喜欢这样做,你需要再安装一个包@mui/styles
和https://mui.com/guides/migration-v4/#mui-material-styles
makeStyles JSS工具不再从@mui/material/styles导出。您可以使用@mui/styles/makeStyles。
此外,如果需要,还需要将
tab
和purple
添加到createTheme
jdgnovmf2#
基于documentation:
@mui/styles是MUI的传统样式解决方案。在v5中已弃用。它依赖于JSS作为样式解决方案,而JSS在@mui/material中已不再使用。
您可以使用the-sx-prop或styled
fiei3ece3#
所以我从这个问题中理解的是你想要添加自定义类到material-ui组件.并且makestyles给你关于主题的错误..你可以通过提供默认主题到makestyles来解决这个问题.你可以使用ThemeProvider来做这个..你所要做的就是用createTheme创建一个默认主题(),然后在ThemeProvider中使用它将其传递给树中ThemeProvider下的所有组件。只需使用ThemeProvider Package 根组件,它将为当前使用的每个makeStyle提供默认主题。
gijlo24d4#
您需要先使用主文件上的提供程序获取默认样式。
访问此处材料UI注射!
w41d8nur5#
@mui/styles与React严格模式或React18不兼容。
建议使用the sx props
或
您可以使用@mui/system package或@mui/material/styles package中的styled()函数,如果没有创建主题,则不同之处在于这些包中使用的默认主题。