使用 react-jss 获得 FOUC 是不可避免的吗？

如何解决使用 react-jss 获得 FOUC 是不可避免的吗？

react-jss 问题：

react-jss 是否存在 FOUC（无样式内容的闪光）的风险 全局样式，因为我们可以不将样式导出为真正的 css？（因为来自 JSS 的样式表仅在脚本运行时呈现）。
我可以使用从“react-jss”生成的 webpack 导出真实的样式表吗？

我在 root.tsx 文件中使用全局 jss 样式，如下所示：

import {createUseStyles} from 'react-jss'
import styles from '../../style/root.style'

在 root.style.ts 中

export default {
    '@global': {
        h1: {
            extend: typography.h1,color: colors.moss.regular,},h2: {
            extend: typography.h2,....

解决方法

为了避免 FOUC，你需要 SSR，react-jss 有一个 API，允许你在 SSR 期间获取样式并将它们插入到样式标签内的文档头部。

稍后，当 js 客户端呈现时，您可以删除来自 SSR 的样式元素。

https://cssinjs.org/react-jss/#server-side-rendering