如何更改 Material-UI AppBar 的明暗主题颜色？

Posted 2023-03-07

【中文标题】如何更改 Material-UI AppBar 的明暗主题颜色？

【英文标题】：How to Change Light and Dark Theme Colors for Material-UI AppBar?

【发布时间】：2020-12-11 13:53:25

【问题描述】：

我对 React 还不是很深入...

AppBar 的样式像我不喜欢的按钮。

所以我想改变它的颜色，但也让它工作在切换明暗方案。

[编辑] 我想为 AppBar 定义自己的颜色（不更改当前颜色）并将它们分别添加到浅色/深色主题中，以便在我切换主题时自动更改为浅色/深色。 [/编辑]

使用 ThemeProvider 更改颜色已经不起作用：

const theme = createMuiTheme(
    palette: 
        // type: 'dark'
    ,
    overrides: 
        MuiTypography: 
            h1: 
                fontSize: 24,
                fontWeight: "normal"
            ,
            h2: 
                fontSize: 22,
                fontWeight: "normal"
            ,
        ,
        MuiAppBar: 
            background: 'white',
            borderBottom: "1px solid lightGray",
        
    ,

不过，MuiTypography 可以。 （正如我在这里看到的 https://material-ui.com/customization/default-theme/ 没有 AppBar 只有排版。）

如何告诉 AppBar 使用除主要/次要颜色之外的其他颜色，同时与内置的明暗主题机制保持同步？

【参考方案1】：

Ciao，如果您想切换主题（例如从深色主题到浅色主题），您可以使用primary 和secondary 颜色（之前在theme 对象中定义）。

让我们以我制作的this代码框为例：

我在主题中定义了 2 种颜色：

const Theme = 
  palette: 
    primary: 
      main: "#000000"
    ,
    secondary: 
      main: "#FFFFFF"
    
  
;

在这种情况下，primary 是我们的深色主题，secondary 是浅色主题。

我创建了 MUI 主题：

const theme = createMuiTheme(Theme);

我将AppBar 组件包装到ThemeProvider 中，并创建了theme：

<ThemeProvider theme=theme>
  <AppBar position="static" color=themeSelected>
  ....
  </AppBar>
</ThemeProvider>

正如您在 AppBar 组件上看到的那样，我在 color 道具 (themeSelected) 中放置了一个状态变量。

现在我创建了一个简单的IconButton 和一个SwapHoriz 图标，然后点击我更改我的状态变量themeSelected：

...

const [themeSelected, setThemeSelected] = useState("primary"); // init as primary color

...

const changeTheme = () =>   // function to set state
   if (themeSelected === "primary") setThemeSelected("secondary");
   else setThemeSelected("primary");
;

...

<IconButton   //icon button with onClick handler
   className=classes.menuButton
   color="inherit"
   aria-label="open drawer"
   onClick=() => 
      changeTheme();
   
>
   <SwapHoriz />
</IconButton>

就是这样。现在，如果您点击SwapHoriz，您可以更改您的颜色主题：

原色主题

二次色主题

编辑

经过您的解释，我了解到您希望 AppBar 使用不同的颜色，并且当您更改主题时，AppBar 应该采用该颜色。

在这种情况下，我知道的唯一方法是以这种方式覆盖 AppBar 的classes：

<AppBar
   position="static"
   color=themeSelected
   classes=
      colorPrimary: classes.appbarpalette,
      colorSecondary: classes.appbarpalette
   
>

然后在你的makeStyles:

...
appbarpalette: 
    "&.MuiAppBar-colorPrimary": 
      backgroundColor: purple[600] // instead of #000000 for primary now you have purple
    ,
    "&.MuiAppBar-colorSecondary": 
      backgroundColor: green[600] // instead of #FFFFFF for secondary now you have green
    
  

我更新了我的代码框示例。

【讨论】：

我不完全明白：我想为 AppBar 定义自己的颜色并将其分别添加到浅色/深色主题中，这样当我切换主题时它会自动更改。

哦，我明白了。 AppBar 应该有自己的颜色。好的，让我修改我的答案。

@sntrcode 我更新了我的答案。我希望你已经完成了你的要求。如果我没有明白这一点，请告诉我:)

看起来不错！ React 确实是一个难以破解的难题，我无法真正告诉 atm 这与此参考 link 的对应程度如何，我只需要编写palette:type: 'dark'。我必须说 React 对于初学者来说也非常简洁。我也不知道我是否应该将您的答案标记为已解决，因为我希望明天能得到更多答案。我想已经给予您信任并非常感谢您的帮助！

没问题。这只是我使用 Material UI 的方式（而且我不是最高专家；））。让我们等待其他答案。也许有人可以教我们更多东西:)。