使用 MUI 中的 Switch 在 useState 之间切换

Question

尝试在我的 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

Answer 1

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