无法读取未定义、材质 ui、theme.breakpoints 的属性“up”

如何解决无法读取未定义、材质 ui、theme.breakpoints 的属性“up”

我正在努力导出 makeStyles。

下面是我的代码和配置

import SearchField from "../SearchField";
import { TextField,Select,useMediaQuery,Grid,Button,Box,Fade } from '@material-ui/core';
import React,{useState,useEffect} from 'react'
import { Theme } from '@material-ui/core/styles';
import { useTheme } from '@material-ui/core/styles';

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

const useStyles = makeStyles((theme) => 
        createStyles({
            root: {
            marginLeft: "none",[theme.breakpoints.up('md')]: 
                {
                    marginLeft: '3vw',},}),);

export default function SearchForm() {
    const isLargeScreen = useMediaQuery(theme => theme.breakpoints.up("lg"))
    const isMedScreen = useMediaQuery(theme => theme.breakpoints.up("md"))
    const isSmallScreen = useMediaQuery(theme => theme.breakpoints.down("sm"));
    const theme = useTheme();

    const [checked,setChecked] = useState(false)

    const styles = {
        marginLeft: isSmallScreen ? "3vw" : "none"
    }


    

     const classes = useStyles();

    // const stylesSec = theme => ({
    //     root: {
    //         marginLeft: 'none',//       // Match [sm,md + 1)
    //       //       [sm,lg)
    //       //       [600px,1280px[
    //       [theme.breakpoints.between('sm','md')]: {
    //         marginLeft: '3vw',//       },//     },//   });

    useEffect(() => {
        if (isMedScreen) {
            setChecked(true)
        }
        if (!isMedScreen) {
            setChecked(false)
        }
    },[isMedScreen])
    
    return (
        <>
            <Grid
                container
                direction="row"
            >
                <Grid item xs md={9} lg={10}>
                    <SearchField fullWidth/>
                </Grid>
                <Grid item >
                    <Box display={{lg: "none"}}>
                        <Button variant='outlined' style={{...styles,maxWidth: '56px',maxHeight: '56px',minWidth: '56px',minHeight: '56px',borderColor: "#d3d3d3"}}/>
                    </Box>
                </Grid>
                <Grid item xs={12} md lg={2}>
                    <Box sx={{pt: isMedScreen ? "" : 1.8,pl: isMedScreen ? "3vw" : ""}}>
                        <div className={classes.root}></div>
                        <Button variant='outlined' fullWidth style={{ background: "#01426A",minHeight: '56px'}} onClick={() => setChecked(!checked)} />
                    </Box>
                </Grid>
            </Grid>
            <Fade in={checked}>
                <div style={{display: checked ? "block" : "none"}}>
                    <Grid
                        container
                        direction="row"
                        spacing={isMedScreen ? 1 : 0}
                    >
                        <Grid item xs={12} md={6}>
                            <Box sx={{pt: 1.8}}>
                                <TextField fullWidth variant='outlined'/>
                            </Box>
                        </Grid>
                        <Grid item xs>
                            <Box sx={{pt: 1.8}}>
                                <Select fullWidth variant='outlined'/>
                            </Box>
                        </Grid>
                    </Grid>
                    <Box
                        display="flex" justifyContent="space-between" sx={{pt: 1.8}}
                    >
                            <Button style={{maxWidth: '15%',maxHeight: '30px',minWidth: '15%',minHeight: '30px'}} variant='outlined'/>
                            <Button style={{maxWidth: '15%',minHeight: '30px'}} variant='outlined'/>
                    </Box>
                </div>
            </Fade>
        </>
    )
}

package.json 依赖

"dependencies": {
    "@babel/core": "^7.14.6","@emotion/cache": "^11.4.0","@emotion/react": "^11.4.0","@emotion/server": "^11.4.0","@emotion/styled": "^11.3.0","@material-ui/core": "^5.0.0-beta.1","@material-ui/icons": "^5.0.0-beta.0","@material-ui/lab": "^5.0.0-alpha.39","@material-ui/styles": "^5.0.0-beta.1","@types/node": "^16.3.0","@types/react": "17.0.14","@types/react-dom": "^17.0.9","axios": "^0.21.1","babel-plugin-inline-react-svg": "^2.0.1","clsx": "^1.1.1","dayjs": "^1.10.6","eslint": "7.30.0","eslint-config-next": "11.0.1","formik": "^2.2.9","husky": "^7.0.1","lint-staged": "^11.0.0","next": "11.0.1","prettier": "^2.3.2","react": "17.0.2","react-app-polyfill": "^2.0.0","react-dom": "17.0.2","swagger-typescript-api": "^9.1.2","swiper": "^6.7.5","typescript": "4.3.5","yup": "^0.32.9"
  },

我发现了 this 个问题，但是，我遇到了以下问题。 尝试从“@ material-ui/core/styles”导出 makeStyles 我得到 Module '"@material-ui/core/styles"' 没有导出成员 'makeStyles'，而当我从 '@material-ui/styles' 导出时'，我在第 15 行收到“TypeError：无法读取未定义的属性 'up'”。

可以做些什么，或者有什么替代方法吗？

解决方法

您需要申报 const theme = useTheme() 在您使用它的第一个位置上方。另外，您对 useMediaQuery 的用法不正确。

这是您想要的工作示例。

  const theme = useTheme()
  const isLargeScreen = useMediaQuery(theme.breakpoints.up("lg"))
  const isMedScreen = useMediaQuery(theme.breakpoints.up("md"))
  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"))

https://codesandbox.io/s/bold-monad-0od5f?file=/src/components/StackOverflowQuestion.js