在 MUI 中更改 Appbar 背景颜色答案

【问题标题】：Change Appbar backgroundColor in MUI在 MUI 中更改 Appbar 背景颜色
【发布时间】：2022-10-16 16:17:54
【问题描述】：

默认的 Appbar 颜色由 MUI 设置为原色，即蓝色。如果我想直接使用sx={{ background: 'white' }} 更改该颜色，那么我将失去深色主题的功能。换句话说，即使应用了 MUI 深色模式主题，背景颜色白色也会卡住。这是不受欢迎的行为。

那么，如何在保持对 Mui 暗模式功能的支持的同时，以正确的方式更改 Appbar 的背景颜色呢？

【问题讨论】：

【解决方案1】：

首先检查用户在浅色或深色主题之间的偏好：

import useMediaQuery from '@mui/material/useMediaQuery';
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')

然后您可以相应地设置AppBar 的颜色：

const appBarColor = prefersDarkMode ? darkColor : lightColor
return <AppBar sx = {{ background: appBarColor }} />

您也可以选择检查theme.palette.mode 的值，以这种方式确定颜色。

【讨论】：

【解决方案2】：

我找到了解决方案，您只需使用道具color 而不是使用道具sx 来更改Appbar 组件的背景颜色，

例如：

<Appbar color="default"> ? here
   <Toolbar disableGutters sx={{ pl: 3 }}>
      ... etc

将 color 属性设置为 "default" 会将颜色更改为白色，当您切换到深色主题时，它将自动为其应用深色主题。

您也可以使用颜色道具的其他变体，例如：primary、success、secondary。

【讨论】：