React Portals 渲染到 body 后样式丢失怎么办？

A. 玉鑫提问于 2026-03-25 08:01:19 阅读 11

框架

我在用 React Portals 把一个 Modal 组件渲染到 document.body 下，结果发现原本在组件内部的样式全没了。我试过把 CSS 类名加上，也确认了类名没拼错，但就是不生效。

是不是因为 Portal 跳出了原来的 DOM 结构，导致 CSS 作用域失效了？我的 Modal 是这样写的：

const Modal = ({ children }) => {
  return createPortal(
    <div className="modal-overlay">{children}</div>,
    document.body
  );
};

而 .modal-overlay 的样式是写在同一个文件里的 CSS 模块里，难道 Portal 不能用 CSS Modules 吗？

React Redux 组件设计

我来解答赞 0 收藏

反馈

1 条解答

IT人浚博 Lv1

Portal 确实会把组件渲染到指定的 DOM 节点，跳出了原来的 DOM 结构，所以样式可能会有问题。你用的是 CSS Modules，确保类名正确传递的同时，还需要检查一下样式是否正确加载。

改一下就行，你可以尝试在 Modal 组件外部引入样式文件，或者用普通的全局样式来覆盖。这里有个例子，假设你用的是 CSS Modules：

先确保你的样式文件正确导出类名：

/* Modal.module.css */

.modal-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5);

}

然后在组件中导入并使用这个类名：

import React from 'react';

import { createPortal } from 'react-dom';

import styles from './Modal.module.css';



const Modal = ({ children }) => {

  return createPortal(

    {children}
,

    document.body

  );

};



export default Modal;

注意 className 要用大括号包裹，确保传递的是动态生成的类名字符串。如果还是不行，检查一下浏览器控制台有没有加载样式文件的错误信息。

2026-03-25 08:02