React实现一个Popup

react学习者

import React, { useState } from 'react'
import styles from './index.module.scss'
export default function PopupCnter() {
  const [state, setState] = useState(false)
  return (
    <div>
      <div className={styles.root}>
        <button onClick={() => setState(!state)}>点击弹出</button>
        {/* 容器 */}
        <div className={`container ${state ? 'active' : ''}`}>
          <div className="Popup">
            <div className="button">
              <button className="confirm">确定</button>
              <button className="close" onClick={() => setState(!state)}>
                取消
              </button>
            </div>
            <h2>hhah</h2>
          </div>
        </div>
      </div>
    </div>
  )
}

.root {
  * {
    box-sizing: border-box;
  }
  :global {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-height: 100vh;

    button {
      border: none;
      background-color: green;
      color: white;
      padding: 0.1rem;
      border-radius: 5px;
    }
    .container {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.3);
      justify-content: center;
      align-items: center;
      //   display: flex;
      display: none;
    }
    .container.active {
      display: flex;
    }
    .Popup {
      width: 400px;
      height: 200px;
      padding: 20px;
      background-color: white;
      border-radius: 6px;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      position: relative;
    }
    .button {
      right: 20px;
      bottom: 20px;
      position: absolute;
    }
    .confirm {
      margin-right: 20px;
    }
  }
}