ReactJS MUI5 Globally updating Toolbar height doesn't work

Question

Trying to update globally the height property for all the toolbars I use, but it doesn't seem to work. The references I'm using are https://mui.com/customization/theme-components/ and https://mui.com/api/toolbar/. From there I have this:

const myTheme = createTheme({
    components: {
      MuiToolbar: {
        root: {
          height: '50px',
          minHeight: '50px',
          maxHeight: '50px'
        }
      }
    }
  })

Also tried:

const myTheme = createTheme({
    components: {
      'MuiToolbar-root': {
          height: '50px',
          minHeight: '50px',
          maxHeight: '50px'
      }
    }
  })

Also not working. Both times it continues showing the default theme toolbar. What am I missing here?

Answer 1

You need to use styleOverrides key to change styles injected by MUI into the DOM. So, something like this should work :

const myTheme = createTheme({
  components: {
    MuiToolbar: {
      styleOverrides: {
        regular: {
          height: "12px",
          width: "20px",
          height: "32px",
          minHeight: "32px",
          "@media (min-width: 600px)": {
            minHeight: "48px",
          },
          backgroundColor: "#ffff00",
          color: "#000000",
        },
      },
    },
  },
});