嘗試為我的 create-react-app 網站上的特定組件構建我自己的暗模式并使用 MUI。我讓 Switch 可以更改切換狀態，但似乎找不到如何來回切換它。基本上想在切換時使頁面變暗，并在同一個切換按鈕上變回亮。請提出建議。
import React from 'react'
import Switch from '@mui/material/Switch';
const DarkMode = () => {
const [color, setColor] = React.useState(false)
return (
<div style={{ backgroundColor: color ? '#2c2d30' : '#ffffff' }}>
<Switch onChange={setColor} />
<h1 style={{ color: color ? '#ffffff' : '#000000' }}>Hello welcome to my site</h1>
</div>
)
}
export default DarkMode
uj5u.com熱心網友回復：
const DarkMode = () => {
const [color, setColor] = React.useState(false)
const toggle = () =>{
setColor(!color);
}
return (
<div style={{ backgroundColor: color ? '#2c2d30' : '#ffffff' }}>
<Switch onChange={toggle} />
<h1 style={{ color: color ? '#ffffff' : '#000000' }}>He</h1>
</div>
)
}
export default DarkMode
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/477460.html
標籤：javascript html css 反应 材料-ui