我们可以在 _app.js 中同时使用 MUI makeStyles 和 Theming

Question

I'm making a tricky nav component using MUI Persistent Drawers with a React + Next structure. In order to get the content shrinking thanks to the state change, I had to put the whole navigation system inside of the _app.js file instead of having it in a distinct component.

Even though it clearly works, I wonder if it'll not impact rendering and performance once built. The makeStyles((theme) seems to work just fine but is not highlighted in VScode, probably because I used both of makeStyles , useTheme and ThemeProvider in the same file, as below:

import { makeStyles, useTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({ ...
    (className example:) appBarShift: {
    width: `calc(100% - ${drawerWidth}px)`,
    marginLeft: drawerWidth,
    transition: theme.transitions.create(['margin', 'width'], {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
}, ... etc

Was it a good idea to put it all together in _app.js, or do I need to refactor everything into a new component passing props to parent somehow?

Thanks for considering, best regards to all of you

Answer 1

I recommend you to put your theme inside a folder theme/theme.js and use createMuiTheme then in your app.js wrap your whole component with the theme provider. That would spread your theme across the app and let you use it where you want ! Is the convention we got with material-ui.

theme/theme.js:

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

export const themeObject = {
  palette: {
    primary: { main: "#333333" },
    secondary: { main: "#FD8C7C" },
  },
  backgroundColor: {
    primary: { main: "#FEF8F8" },
    secondary: { main: "#FFFFFF" },
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
  },
  overrides: {
    MuiDivider: {
      root: {
        backgroundColor: "#FFFFFF",
      },
    },
  },
}

export default createMuiTheme(themeObject)

pages/app,js:

import React from "react"
import { ThemeProvider } from "@material-ui/styles"
import Box from "@material-ui/core/Box"
import defaultTheme from "../theme/theme"

const App = () => {
  return (
    <Box>
      <ThemeProvider theme={defaultTheme}>
       ...
      </ThemeProvider>
    </Box>
  )
}

export default App

component/SideBar.js:

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

const useStyles = makeStyles((theme) => ({
  drawer: {
    width: theme.sidebar.width,
    color: theme.palette.primary
    flexShrink: 0,
    whiteSpace: "nowrap",
    "& .MuiDrawer-paper": {
      top: "unset",
    },
  },
  drawerClose: {
    transition: theme.transitions.create("width", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    overflowX: "hidden",
    width: theme.spacing(7) + 1,
    [theme.breakpoints.up("sm")]: {
      width: theme.spacing(7) + 1,
    },
  },
  expandButton: {
    [theme.breakpoints.up("sm")]: {
      marginLeft: theme.spacing(-2.5),
      marginRight: theme.spacing(2.5),
    },
  },
}))

export default function Sidebar(props) {
const classes = UseStyles()
  return (...)
}

In the SideBar you can see that i have use the theme.zindex.drawer who come from directly theme.js. I also recommend you to go check this MUI THEMING that would let you dive into the theming more deeply !