Cannot read property 'up' of undefined, material ui, theme.breakpoints

Question

i'm struggling with the export of makeStyles.

below is my code and configuration

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

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

I found this question, however, I had the following problems. Trying to export makeStyles from "@ material-ui/core/styles" I get Module '"@material-ui/core/ styles"' has no exported member 'makeStyles', while when I export from '@material-ui/styles', I get "TypeError: Cannot read property 'up' of undefined" in line 15.

Can something be done about it, or is there an alternative to it?

Answer 1

The theme.breakpoints will not available if you don't add material theme context to your app.

Please try this sandbox. Toggle between two theme setup to understand your situation.

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")
);

Answer 2

I was getting the same issue but it get resolved after I created my own theme.Someting like this:

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


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

export default theme;

and I imported into the file I want to use theme.breakpoint.Something like this:

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 />}>Ask Question</Button>
                        </div>
                    </Toolbar>
                </AppBar>
            </Box>
            <Container maxWidth="sm">
                hello
            </Container>
        </React.Fragment>
    );
}

export default Navbar;

note the difference in

const usestyles = makeStyles(()=>{})

Answer 3

You need to declare const theme = useTheme() above the first place you use it. Also, your usage of useMediaQuery is incorrect.

Here is a working example of what you were going for.

  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