Material-UI makeStyles 无法读取未定义的属性 'down'

Question

我正在使用 Material-UI 开发个人网站，为了使其具有响应性，我想在较小的屏幕上隐藏图像，但是当我尝试使用 [theme.breakpoints.down('md')] 时，它一直给我错误：

TypeError: Cannot read property 'down' of undefined

我是初学者，只是想不通为什么会出现此错误。我参考了文档和其他与此类似的问题，但我找不到任何解决方案。

这是我的组件：

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 ,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

Answer 1

替换

import { makeStyles } from "@material-ui/styles";

和

import { makeStyles } from "@material-ui/core/styles";

makeStyles from "@material-ui/core/styles" 是另一个的包装钩子。如果您没有在 ThemeProvider 中提供默认主题，此包装器会添加一个默认主题。 Source.

Material-UI makeStyles 无法读取未定义的属性 'down'

Material-UI makeStyles cannot read property 'down' of undefined

css

reactjs

material-ui

jss

makestyles

Material-UI makeStyles 无法读取未定义的 属性 'down'

Material-UI makeStyles cannot read property 'down' of undefined

css

reactjs

material-ui

jss

makestyles

Material-UI makeStyles 无法读取未定义的属性 'down'