React Portal组件使用style与class属性样式不生效是什么原因？

问题原因 #

• SSR hydration 不匹配
  你实现的Portal在服务端渲染时会返回null，客户端hydrate阶段React会优先复用服务端返回的DOM结构，此时Portal挂载的节点和React虚拟DOM的层级不匹配，导致属性同步失败，style、className等属性不会被渲染到真实DOM上，这是该问题最常见的诱因。
• Portal组件外层存在props拦截逻辑
  如果Portal的父组件中存在React.cloneElement操作，或者你使用的上层框架/自定义HOC会修改子组件的props，Portal返回的虚拟DOM节点的props可能被意外覆盖，导致style、className丢失。
• React与ReactDOM版本不匹配
  如果你的react和react-dom版本不一致，尤其是跨大版本使用时，createPortal的属性同步逻辑会出现异常，导致子元素的属性无法正确挂载到真实DOM。
• 全局DOM操作拦截
  如果项目中引入了全局的DOM操作脚本、浏览器插件，会拦截非根节点下的DOM元素属性设置，Portal挂载到body下的元素刚好处于被拦截范围，导致静态设置的style、className被移除。

修复方案 #

1. 针对hydration不匹配的问题，给Portal添加客户端渲染标记，确保hydrate阶段和服务端返回结构一致：

const Portal = ({ children }) => {
    const [isClient, setIsClient] = useState(false);
    useEffect(() => setIsClient(true), []);
    return isClient ? ReactDOM.createPortal(children, document.body) : null;
};

2. 排查父组件是否存在修改子元素props的逻辑，确保Portal返回的节点不会被外层的cloneElement等操作覆盖属性。
3. 校验项目中react和react-dom的版本，保证两者版本号完全一致。
4. 禁用相关浏览器插件测试，排查全局脚本是否存在DOM属性拦截逻辑。

内容的提问来源于stack exchange，提问作者Arman