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

Posted 2023-03-16

【中文标题】无法读取未定义、材质 ui、theme.breakpoints 的属性“向上”

【英文标题】：Cannot read property 'up' of undefined, material ui, theme.breakpoints

【发布时间】：2021-09-25 12:01:34

【问题描述】：

我正在为 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", maxHeight: '56px', 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%', maxHeight: '30px', minWidth: '15%', minHeight: '30px' variant='outlined'/>
                            <Button style=maxWidth: '15%', maxHeight: '30px', minWidth: '15%', minHeight: '30px' variant='outlined'/>
                            <Button style=maxWidth: '15%', maxHeight: '30px', minWidth: '15%', minHeight: '30px' variant='outlined'/>
                            <Button style=maxWidth: '15%', maxHeight: '30px', minWidth: '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，我得到模块“@material-ui/core/styles”没有导出成员“makeStyles”，而当我从“@material-ui/styles”导出时'，我在第 15 行得到“TypeError: Cannot read property 'up' of undefined”。

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

【参考方案1】：

如果您不向应用添加材料主题上下文，则theme.breakpoints 将不可用。

请试试这个sandbox。在两个主题设置之间切换以了解您的情况。

import * as React from "react";
import ReactDOM from "react-dom";
import  StyledEngineProvider  from "@mui/material/styles";
import  createTheme, ThemeProvider  from "@mui/material/styles";
import Demo from "./demo";

// breakpoints is available when using "material theme" that created by createTheme
const theme = createTheme();

// breakpoints is available when using "material theme" that created by createTheme
const theme = createTheme( color: "red" );

// breakpoints is not available when using "pure theme"
//const theme =  color: "red" ;

ReactDOM.render(
  <StyledEngineProvider injectFirst>
    <ThemeProvider theme=theme>
      <Demo />
    </ThemeProvider>
  </StyledEngineProvider>,
  document.querySelector("#root")
);

【参考方案2】：

我遇到了同样的问题，但在我创建了自己的主题后它得到了解决。像这样：

import  orange  from '@mui/material/colors';
import  createTheme, ThemeProvider, styled  from '@mui/material/styles';


const theme = createTheme(
    status: 
      danger: orange[500],
    ,
);

export default theme;

我导入到我想使用的文件中 theme.breakpoint.Something 像这样：

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import QuestionAnswerIcon from '@mui/icons-material/QuestionAnswer';
import QuickreplyIcon from '@mui/icons-material/Quickreply';
import  alpha, styled  from '@mui/material/styles';
import  makeStyles  from "@mui/styles";
import theme from '../theme';

const usestyles = makeStyles(() => (
    toolbar: 
        display: 'flex',
        backgroundColor:'black',
        justifyContent: 'space-evenly',
    ,
    button: 
        background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
        borderRadius: 3,
        boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
        
    ,
    large: 
        display: 'flex',
        color:"blue",
        [theme.breakpoints.down('md')]: 
            display: 'none',
        ,
    ,
    small: 
        display: 'flex',
        [theme.breakpoints.up('md')]: 
            display: 'none',
        
    ,
    icon: 
        display: 'flex',
    

));
function Navbar() 
    const classes = usestyles();
    const val="true";
    return (
        <React.Fragment >
            <Box >
                <AppBar position="static">
                    <Toolbar className=classes.toolbar>
                        <Typography className=classes.icon>
                            <QuickreplyIcon  color="primary" />
                            <Typography  className=classes.large>QNA_ADDA</Typography>
                            <Typography  className=classes.small>QNA</Typography>

                        </Typography>
                        <div >
                            <Button className=classes.button variant="contained" startIcon=<QuestionAnswerIcon />></Button>
                        </div>
                    </Toolbar>
                </AppBar>
            </Box>
            <Container maxWidth="sm">
                hello
            </Container>
        </React.Fragment>
    );


export default Navbar;

注意区别

const usestyles = makeStyles(()=>)

【参考方案3】：

您需要声明 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/***Question.js

【讨论】：

useTheme 没问题，还是不行

@gregg1234 你能提供一个代码和存储库吗？我试图在我的沙盒中重新创建您的环境，但提供您的源代码对重现很有用