默认的Appbar colored颜色 由MUI设置为原色,即蓝色.

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

推荐答案

首先判断用户对浅色或深色主题的偏好:

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

然后可以相应地设置AppBar的 colored颜色 :

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

您也可以选择判断值theme.palette.mode,以确定 colored颜色 的方式.

useMediaQuery

prefers-color-scheme

Reactjs相关问答推荐

我的 useEventListener.js 出了什么问题,一直在生成我的 useEventListener 错误

我什么时候应该使用 useEffect 挂钩而不是事件侦听器?

使用来自 reactJS 的 POST 将带有令牌的图像上传到 fastAPI 路由

React/Next.js,以艰难的方式平移 SVG

使用 React Router 中的参数重定向到父路由

成功登录或注销重定向后更新导航栏

使用 react-router-dom (v6) 成功登录后,Reactjs 重定向到仪表板页面

教程使用 React Hook,但我正在使用类组件设置

为什么 useIsMounted 返回回调而不是值本身?

如何创建单页

如何用 yew 查询和更新 DOM?

避免双重useEffect中的陈旧状态?

如何在不重复触发的情况下更新 useEffect 中的卸载处理程序?

Error 11903 when developing first gatsby project

No routes matched location "/"

当更改选项props 传递给 Select 时,使用 react select 有条件地禁用选项不起作用

错误 [ERR_PACKAGE_PATH_NOT_EXPORTED]:包子路径 './lib/tokenize' 未由 node_modules 中模块的 package.json 中的“exports”定义

Reactjs 开发工具中的钩子编号对应什么?

如何在 react-router-dom v6 中返回上一条路由

有结构文件夹