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

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

回答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

相似文章

最新文章