MUI 两个 AppBar 在同一个页面，component='header' 和 component='footer'。如何使用 createTheme() 覆盖样式？

Question

在同一页面中有两个 appBars 组件是一种好方法（一个作为页眉，另一个作为页脚）？此外，我正在使用 MUI createTheme 来覆盖某些样式。我这样做是为了覆盖 appBar 组件。

components: { ...
MuiAppBar: {
      styleOverrides: {
        root: {
          minHeight: '4.375rem',
          backgroundColor: appColors.aqua600,
        },
      },
    }, ...

这很好用，但我想知道如何覆盖呈现为 'header' 的 AppBar 的样式并设置呈现为 'footer'

的另一个 appBar 的样式

组件用法：

<AppBar
        component="header | footer" ...
</AppBar>

我知道使用 CSS 可以轻松完成，但我想知道是否可以使用 MUI 的 createTheme 来完成？

Answer 1

这可以通过使用 ownerState.

覆盖基于道具的样式来完成

Overrides based on props You can pass a callback as a value in each slot of the component's styleOverrides to apply styles based on props.

The ownerState prop is a combination of public props that you pass to the component + internal state of the component.

您可以在 docs 上查看更多信息。

所以，MuiAppBar 的自定义主题应该是这样的：

components: {
    MuiAppBar: {
      styleOverrides: {
        root: ({ ownerState }) => {
          return {
            ...(ownerState.component === "header" && {
              backgroundColor: "#202020"
            })
          };
        }
      }
    }
  }

MUI 两个 AppBar 在同一个页面，component='header' 和 component='footer'。如何使用 createTheme() 覆盖样式？

MUI two AppBar in the same page as component = 'header' and component = 'footer'. How to override styles using createTheme()?

material-ui