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

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