Material-UI makeStyles无法读取未定义的属性';向下';
我正在使用Material-UI处理个人网站,为了使其具有响应性,我想在较小的屏幕上隐藏图像,但当我尝试使用[theme.breakpoints.down('md')]
时,它总是给我错误:
TypeError:无法读取未定义的属性"Down"
我是初学者,就是不明白为什么会出现这个错误。我参考了文档和其他与此类似的问题,但找不到任何解决方案。
以下是我的组件:
import React from 'react'
import { Grid ,Button,Box} from '@material-ui/core';
import { makeStyles } from "@material-ui/styles";
import './header.css'
import guy from '../../assets/img/peep_guy.svg'
const useStyles =makeStyles(theme=>({
root:{
marginLeft:"55px",
marginRight:"20px"
},
try_btn:{
background:"black",
textTransform:"none",
margin:"25px",
fontSize:"clamp(10px,2vw,20px)",
background:"#5338f8",
"&:hover":{
boxShadow:" 0 15px 30px -15px rgb(0 0 0 / 20%)",
background:"#5338f8",
},
},
boy_img:{
paddingTop:"12px",
[theme.breakpoints.down('md')]: {
display:"none"
},
}
}))
function Header() {
const {try_btn,boy_img,root} =useStyles();
return (
<div>
<Box m={5}>
<Box ml={4} />
<Grid container spacing={0} className={root}>
<Grid item lg={8} md={9} align="right">
<h1 className="heading">Don't spend $15,000 on a coding bootcamp</h1>
<h2 className="sub_head">Our career path helps motivated students become hireable frontend developers for 1% of the cost</h2>
<Button className={try_btn} color="secondary" variant="contained">Try it out now</Button>
</Grid>
<Grid item lg={3} md={2} xs={0} sm={0}>
<Box pt={3} />
<img className={boy_img} style={{transform:"scaleX(-1)"}} src={guy} alt=""/>
</Grid>
</Grid>
</Box>
</div>
)
}
export default Header
解决方案
替换
import { makeStyles } from "@material-ui/styles";
与
import { makeStyles } from "@material-ui/core/styles";
makeStyles
from"@material-ui/core/styles"
是另一个的包装钩子。如果您在ThemeProvider
中没有提供默认主题,此包装器将添加一个默认主题。Source。
相关文章