字符串插值不适用于 nextjs react

问题描述

我有以下代码，

const Layout: React.FC<LayoutProps> = ({ children }) => {
    const darkMode = useRecoilValue(darkModeAtom)
    
    console.log('darkMode: ',darkMode)
    return (
        <div className={`max-w-6xl mx-auto my-2 ${darkMode ? 'dark' : ''}`}>
            <Nav />
            {children}
            <style jsx global>{`
                body {
                    background-color: ${darkMode ? '#12232e' : '#eefbfb'};
                }
            `}</style>
        </div>
    )
}

我使用 recoil-persist 后坐力。 那么，当darkMode 值为true 时，className 应该包含一个dark 类，对吗？但事实并非如此。我不知道这里出了什么问题。但是当我第一次刷新时它不起作用，之后它工作正常。我也尝试过使用 darkMode === true 条件，但它仍然不起作用。您会看到样式化的 jsx，效果很好。这随 darkMode 值而变化，当我刷新时，它会保留数据。但是当我检查时，我没有在第一个 div 中看到暗类。另外，当我 console.log 的 darkMode 值时，我看到 true，但不包括黑暗类。

这是sandbox link

也许这是一个愚蠢的错误，但我在这上面浪费了很多时间。那么我在这里做错了什么？

解决方法

问题是在 SSR（服务器端渲染）期间没有可用的 localStorage/Storage 对象。因此来自服务器的结果 html 始终将 darkMode 设置为 false。这就是为什么您可以在补水步骤中看到 cosole 不匹配标记错误的原因。

我假设在初始渲染（在水化步骤期间）使用一些始终为 false 的状态来匹配 SSR 的 html，但稍后将使用实际的 darkMode 值。类似的东西：

// themeStates.ts
import * as React from "react";
import { atom,useRecoilState } from "recoil";
import { recoilPersist } from "recoil-persist";

const { persistAtom } = recoilPersist();

export const darkModeAtom = atom<boolean>({
  key: "darkMode",default: false,effects_UNSTABLE: [persistAtom]
});

export function useDarkMode() {
  const [isInitial,setIsInitial] = React.useState(true);
  const [darkModeStored,setDarkModeStored] = useRecoilState(darkModeAtom);

  React.useEffect(() => {
    setIsInitial(false);
  },[]);

  return [
    isInitial === true ? false : darkModeStored,setDarkModeStored
  ] as const;
}

内部组件像这样使用它：

// Layout.tsx
  const [darkMode] = useDarkMode();
// Nav.tsx
  const [darkMode,setDarkMode] = useDarkMode();

codesandbox link

,

对于登陆此页面的任何人，我刚刚发现了一个很棒的库，名为 next-themes

它非常好且轻巧（1.5kb）。试试看。