MUI 两个应用栏位于同一页面中，作为组件 = 'header' 和组件 = "页脚"。如何使用createTheme()覆盖样式？

Question

在同一页面中有两个appBars组件是一个很好的方法(一个作为页眉，另一个作为页脚)?此外，我正在使用MUI createTheme来覆盖一些样式。我这样做是为了重写appBar组件。

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

这工作得很好，但我想知道我如何重写一个AppBar的样式，呈现为'header'和样式的另一个AppBar呈现为'footer'

组件使用:

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

我知道这可以很容易地用CSS完成，但我想知道这是否可以使用MUI的createTheme ?

Answer 1

可以通过使用ownerState覆盖基于props的样式来实现。

基于props重写你可以在组件的styleOverrides的每个槽中传递一个回调值，以应用基于props的样式。

ownerState是传递给组件的公共props +组件的内部状态的组合。

你可以查看更多文档。

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

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