ReactJS MUI5 全局更新工具栏高度不起作用

Question

尝试为我使用的所有工具栏全局更新 height 属性，但它似乎不起作用。我使用的参考资料是 https://mui.com/customization/theme-components/ and 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",
        },
      },
    },
  },
});

ReactJS MUI5 全局更新工具栏高度不起作用

ReactJS MUI5 Globally updating Toolbar height doesn't work

reactjs

material-ui

customization