react模态框周围不可点击且透明

要实现一个透明的并且周围不可点击的React模态框，你可以使用`react-modal`库，并在CSS中设置遮罩层的样式。下面是一个实现的示例代码：

import ReactModal from 'react-modal';
import './styles.css';

function MyModal() {
  return (
    <ReactModal
      isOpen={true}
      overlayClassName="transparent-overlay"
    >
      {/* 模态框内容 */}
    </ReactModal>
  );
}

.transparent-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  pointer-events: none; /* 禁用遮罩层上的点击事件 */
}

.transparent-overlay:after {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto; /* 使内容可点击 */
}

在上面的代码中，我们设置了`overlayClassName`属性为`transparent-overlay`，并在CSS中设置了`.transparent-overlay`的样式，其中`background-color`属性设置为`rgba(0, 0, 0, 0.5)`，表示遮罩层的背景颜色为半透明的黑色。同时，我们还禁用了遮罩层上的点击事件，以确保模态框周围无法点击。

为了使模态框内部的内容可点击，我们使用`:after`伪元素覆盖遮罩层，并将其`pointer-events`属性设置为`auto`，使内容可点击。