React 弹出框背景蒙版

React  弹出框背景蒙版

• 环境：react + typescript
• 使用module css
• 创建类型文件
  • 参考：找不到模块“./index.module.less”或其相应的类型声明。ts(2307)

declare module '*.module.css' {
  const classes: {
    readonly [key: string]: string
  }
  export default classes
  declare module '*.css'
}

declare module '*.module.less' {
  const classes: {
    readonly [key: string]: string
  }
  export default classes
  declare module '*.less'
}

• Modal

• style.module.css

.modal_wraper_show {
  display: block;
}

.modal_wraper_hide {
  display: none;
}

• index.tsx

import React,{ memo, ReactNode} from 'react'
import ReactDOM  from 'react-dom';

interface propstype{
  visible: boolean,
  children:ReactNode
}

export default memo(function Modal(props:propstype) {
  let isVisible = props.visible ? 'block' : 'none'
  return (
    <div style={{display: isVisible}}>
      {
          ReactDOM.createPortal(
            props.children,
            document.getElementById("modal") as Element
          )
      }
      <div className='u-mask'></div>
    </div>

  )
})

• 其中modal  u-mask 在全局中定义，modal元素在 index.html中定义

#modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.u-mask {
  display: block;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5;
}

• 定义对话框：

• style.module.less 

.content {
  z-index: 12;
  width: 600px;
  height: 400px;
  display: block;
  background-color: #fff;
  font-size: 30px;
  box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.hide {
  display: none;
}
.content {
  :global {
    .ant-btn {
      background: #0f0;
      border-radius: 3px;
      color: #000;
    }
    .ant-btn-primary {
      background: #0f0;
    }
  }
}

• index.tsx

import React, { memo } from 'react';
import { Button } from 'antd'

import Modal from '../../components/Modal'
import  style from './style.module.less'

interface proptypes{
  showDilog:boolean,
  onChangeState: ()=>void
}

export default  memo(function TestDilog(props:proptypes) {

  let {showDilog, onChangeState}= props;

  function onCloseBtn(){
    onChangeState()
  }

  return (
       <Modal visible={showDilog}>
          <div className={showDilog ? style.content: style.hide}>
               <Button type="primary" onClick={onCloseBtn}>关闭</Button>
          </div>
       </Modal>
  );
});

• 调用

•  hello.tsx

import React, { memo ,useState} from 'react'
import { Button, Space } from 'antd'
import { PoweroffOutlined } from '@ant-design/icons'

import Testdialog  from '../testdialog'
import {HelloWrapper} from './style'

export default memo(function HelloWord() {

  const [showdialog, setshowdialog] = useState(false);

  function showDialog(){
    setshowdialog(!showdialog);
  }

  return (
    <HelloWrapper>
      <Space style={{ width: '100%' }}>
        <Button type="primary" onClick={showDialog}>Click me!</Button>
        <Button type="primary" icon={<PoweroffOutlined />}>
          Click me!
        </Button>
        <Button type="primary" icon={<PoweroffOutlined />} />
      </Space>

      <Testdialog showDilog={showdialog} onChangeState = {showDialog}/>
    </HelloWrapper>
  )
})

• style.js

import styled from 'styled-components'

export const HelloWrapper = styled.div`
  background-color: #00f;
  font-size: 20px;
`

• 最终效果：