React页面刷新后组件backgroundColor样式未重新应用问题

<ColorPreview />组件从localStorage读取存好的theme主题色渲染色块：

• 颜色选择器修改色值时，新色值能正常存入localStorage，色块背景、色值文本均正常渲染
• 页面刷新后，色值文本能正常显示，但色块backgroundColor样式未生效，背景为空
  

现有组件代码如下：

const ColorPreview = ({ colors }: any) => {
  const { theme, setTheme } = useThemeState();
  
  return (
    <>
      <div className='grid grid-cols-3 gap-4'>
        {Object.keys(theme).map((key: any, index) => {
          console.log('THEME', typeof theme[key as keyof ITheme]); //string
          return (
            <div
              key={key}
              className={clsx('overflow-hidden rounded-lg border-2', {
                ['h-62 col-span-2 row-span-2 w-52 ']: index === 0,
              })}
            >
              <div
                style={{
                  backgroundColor: `${theme[key as keyof ITheme]}`,
                }}
                className={clsx('h-28', {
                  ['!h-64']: index === 0,
                })}
              />

              <p
                className={clsx('justify-center p-2 text-base', {
                  ['!p-8']: index === 0,
                })}
              >
                {theme[key as keyof ITheme]}
              </p>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default React.memo(ColorPreview);

theme对象存储结构如下：

theme: {
  primary: newHexValue //#002d89,
  secondary: newHexValue //#bfd4ff,
  tertiary: newHexValue //#80aaff,
}

按优先级依次排查以下问题：

1. 校验从localStorage读取的色值合法性 #

localStorage读写时如果没做正确的序列化/反序列化，很容易给色值带上多余的引号、转义符、不可见空格，这类值能正常作为文本渲染，但浏览器无法识别为合法CSS颜色值，自然不会渲染背景。
在渲染时加一行日志校验：

const color = theme[key as keyof ITheme]
console.log('色值校验', color, color?.length, color?.charCodeAt(0))

正常十六进制色值长度为7，首字符#的charCode为35，如果校验结果不符合，在读localStorage时加一步值清洗：

// 读localStorage时不要直接拿字符串，先反序列化
const savedTheme = JSON.parse(localStorage.getItem('theme') || JSON.stringify(defaultTheme))
// 清洗所有色值，去掉多余的引号、空格、转义符
Object.keys(savedTheme).forEach(key => {
  if (typeof savedTheme[key] === 'string') {
    savedTheme[key] = savedTheme[key].replace(/['"\\\s]/g, '')
  }
})

同时把style里多余的模板字符串去掉，直接传色值即可，避免隐式类型转换出问题：

style={{
  backgroundColor: color // 不要写`${color}`
}}

2. 修复React.memo与状态引用问题 #

你用React.memo做组件浅比较，如果更新theme时直接修改原对象属性、没有创建新的对象引用，会导致浅比较判定props无变化，跳过部分DOM更新（文本节点可能因为其他原因更新，但inline样式不会同步）。
更新theme时必须保证返回新的对象引用：

// 错误写法：直接修改原对象，引用不变
theme.primary = newHexValue
setTheme(theme)

// 正确写法：返回新对象，触发更新
setTheme(prev => ({
  ...prev,
  [key]: newHexValue
}))

3. 修复SSR框架hydration不匹配问题 #

如果用的是Next.js、Remix等带服务端渲染的框架，服务端渲染阶段拿不到localStorage，会用默认空主题渲染，客户端hydration时如果没做挂载判断，很容易出现文本更新但样式不更新的hydration错配问题。
加一个客户端挂载判断，等hydration完成后再渲染真实色块：

const ColorPreview = ({ colors }: any) => {
  const { theme, setTheme } = useThemeState();
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  // 挂载前渲染占位骨架，避免hydration错配
  if (!mounted) {
    return <div className="grid grid-cols-3 gap-4">
      {Array(3).fill(0).map((_,i) => (
        <div key={i} className="h-28 rounded-lg bg-gray-100 animate-pulse" />
      ))}
    </div>
  }
  
  return (
    // 原有渲染逻辑
  )
};

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