react-modal 修改模态框 模态框之外浅白色遮罩样式

要修改 `react-modal` 模态框之外的浅白色遮罩样式，需要对 `body` 元素设置样式。

在默认情况下，`react-modal` 会在模态框打开时给 `body` 元素添加一个类名为 `ReactModal__Body--open` 的样式类。我们可以通过这个类名来选择 `body` 元素，并为其添加一个浅白色的遮罩层。

例如，你可以在 CSS 中添加以下样式：

.ReactModal__Body--open::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 99;
}

在上面的样式中，我们使用 `::after` 伪元素来为 `body` 元素添加遮罩层。`position: fixed` 用于将遮罩层固定在页面上，`top`、`left`、`width` 和 `height` 用于设置遮罩层的位置和大小。

`background-color` 属性用于设置遮罩层的颜色，这里我们将其设置为浅白色，透明度为 50%。`z-index` 属性用于设置遮罩层的层级，确保它位于模态框下方。

然后，将上述 CSS 样式添加到你的项目中，当 `react-modal` 的模态框打开时，就会自动添加浅白色的遮罩层。

注意：如果在你的样式表中使用了 `!important` 关键字，可能会导致上述样式不生效。因此，建议避免在样式表中使用 `!important`。