Ant Design V5 导致首次加载时出现 Flash 无样式组件

Question

这个问题与几年前的问题非常相似。以下是导航到讨论的链接。

Github 讨论

我正在使用Next.js 13ant Ant Design V5design 组件，在首次加载时将具有 flash unstyled 组件。之后就恢复正常了，根据讨论，好像是SSR的问题。

除了使用讨论中的解决方案之外，还有什么完美的解决方案可以解决吗？

• 禁用 SSR，它可以工作，但似乎不是一个完美的解决方案。
• visibility: hidden直到useEffect设置mount state为true，不起作用，动画仍然存在。
• 禁用动画，动画不再存在，但它仍然从无样式组件转换为样式组件。

Answer 1

export default function App({ Component, pageProps }: AppProps) {
    const [mounted, setMounted] = useState(false);
    useEffect(() => setMounted(true), []);

    if (typeof window !== 'undefined') {
        window.onload = () => {
            document.getElementById('holderStyle')!.remove();
        };
    }

    return (
        <ConfigProvider>
            <style
                id="holderStyle"
                dangerouslySetInnerHTML={{
                    __html: `
                    *, *::before, *::after {
                        transition: none!important;
                    }
                    `,
                }}
            />
            <div style={{ visibility: !mounted ? 'hidden' : 'visible' }}>
                <Component {...pageProps} />
            </div>
        </ConfigProvider>
    );
}

经过一一测试，到目前为止，这是我找到的在不禁用SSR.