大佬教程收集整理的这篇文章主要介绍了在暗/亮模式材质 UI 之间切换，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我就是想不通。我想用 Switch 改变背景，但它只在第一次工作，在随后的点击中不起作用。 这是代码沙箱：
https://codesandbox.io/s/strange-shaw-2tfk5
谁能告诉我这是怎么回事？我在 React 中使用 Material UI
最小可重现示例： 这是我的应用组件
import React from "react";
import { useState } from "react";
import { themeProvIDer,createtheme } from "@material-ui/core/styles";
import { Container,Switch,CSSBaseline } from "@material-ui/core";
const darktheme = createtheme({
palette: {
type: "dark",BACkground: {
default: "hsl(230,17%,14%)"
}
}
});
const lighttheme = createtheme({
palette: {
type: "light",BACkground: {
default: "hsl(0,0%,100%)"
}
}
});
const App = () => {
const [mode,setMode] = useState("light");
const SELEctedtheme = mode === "dark" ? darktheme : lighttheme;
return (
<themeProvIDer theme={SELEctedthemE}>
<CSSBaseline />
<Container maxWIDth="lg">
<h1>Hello</h1>
<Switch onChange={() => setMode(mode === "light" ? "dark" : "light")} />
</Container>
</themeProvIDer>
);
};
export default App;
根据Material UI documentation，要在明暗之间切换，他们建议useMemo按需创建新主题：
import { useState,useMemo } from "react";
function App() {
const [mode,setMode] = useState("light");
const theme = useMemo(
() =>
createTheme({
palette: {
type: mode,BACkground: {
dark: "hsl(230,17%,14%)",light: "hsl(0,0%,100%)"
}
}
}),[mode]
);
return (
<ThemeProvider theme={themE}>
<CssBaseline />
<Container maxWidth="lg">
<h1>Hello</h1>
<Switch onChange={() => setMode(mode === "light" ? "dark" : "light")} />
</Container>
</ThemeProvider>
);
}
即使使用 StrictMode 这也能工作。
在组件外部定义时它不适用于 StrictMode 的原因在 a Github issue 中得到解决，其中指出此行为应在 v5（仍处于测试阶段）中修复。
不知道为什么，但在 index.js 中删除 StrictMode 解决了问题
,您可以将主题变量放在应用程序组件中： https://codesandbox.io/s/tender-lederberg-8v7tx?file=/src/App.js 或动态更改主题属性： https://codesandbox.io/s/magical-ives-587fm?file=/src/App.js
以上是大佬教程为你收集整理的在暗/亮模式材质 UI 之间切换全部内容，希望文章能够帮你解决在暗/亮模式材质 UI 之间切换所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。