ReactJS MUI5全局更新工具栏高度无效

Question

尝试为我使用的所有工具栏全局更新height属性，但它似乎不起作用。我使用的引用是https://mui.com/customization/theme-components/和https://mui.com/api/toolbar/。从这里我得到了这个：

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

也曾尝试过：

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

也不起作用。两次都会继续显示默认的主题工具栏。我在这里错过了什么？

Answer 1

您需要使用styleOverrides键来更改MUI注入到DOM中的样式。所以，像这样的东西应该有效：

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