styled 手撸Switch开关

import React from "react"
import styled from "styled-components"

// 开关盒子
const SwitchBox = styled.div`
  width: 44px;
  height: 22px;
  border-radius: 12px;
  border: 2px solid #e9eef2;
  padding: 2px;
  cursor: pointer;
`

// 多选框
const checkbox = styled.input.attrs({ type: "checkbox" })``

const Label = styled.label`
  display: inline-block;
  width: 36px;
  height: 14px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  background-color: #f3f6f8;
  > input {
    visibility: hidden;
  }
  > input::after {
    position: absolute;
    width: 14px;
    height: 14px;
    left: 1px;
    top: 0px;
    visibility: visible;
    content: "";
    background-color: white;
    border-radius: 50%;
    transition: all 0.2s;
  }
  input:checked::after {
    transform: translateX(20px);
  }
  input::before {
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    visibility: visible;
    content: "";
    transition: all 0.2s;
  }
  input:checked::before {
  }

  input:checked::after {
    background-color: #32d74b;
  }
`
interface Iporps {
  onChange: (checked: boolean) => void
}

const Switch: React.FC<Iporps> = (props: Iporps) => {
  return (
    <SwitchBox>
      <Label className="label">
        <input type="checkbox" onChange={(e) => props.onChange(e.target.checked)} />
      </Label>
    </SwitchBox>
  )
}

export default Switch

父组件

function index() {
  // 路由实例
  const navigate = useRouter()
  // 给子组件传值
  const switchHandle = (checked: boolean) => {
    alert(checked)
  }
  return (
    <Container>
      <Sider>
        <PageUp>
          <Arrow onClick={() => navigate.push("/account")} />
        </PageUp>
        <Menu>
          <Arrow onClick={() => navigate.push("/account")} />
          <span>Security</span>
        </Menu>
        <Menu>
          <Arrow onClick={() => navigate.push("/account")} />
          <span>Security</span>
        </Menu>
        <Menu>
          <Arrow onClick={() => navigate.push("/account")} />
          <span>Security</span>
        </Menu>
        <Menu>
          <Arrow onClick={() => navigate.push("/account")} />
          <span>Security</span>
        </Menu>
      </Sider>
      {/* 右侧主体 */}
      <Main>
        <SetUp>
          <span>Let's complete setting up your account......</span>
          <span>set up email & password</span>
        </SetUp>
        <Notice>Notifications</Notice>
        <Prompt>Select which notifications you would like to receive </Prompt>
        <SwitchBox>
          <Switch onChange={(e) => switchHandle(e)} />
        </SwitchBox>
      </Main>
    </Container>
  )
}

export default index

效果如下