React Stitches深色主题不生效问题排查求助

问题根源 #

你的全局样式仅绑定了默认主题的变量值，没有为深色主题添加对应的样式关联逻辑。当把dark-theme类加到<html>上时，全局样式里的body选择器不会自动切换到深色主题的变量，因为缺少主题类与全局样式的绑定规则。

修正步骤 #

1. 修改全局样式，添加深色主题的样式规则
   在globalCss中嵌套深色主题的类选择器，指定对应主题下的body样式：

   const globalStyles = globalCss({
     body: {
       color: '$text',
       backgroundColor: '$bodyBg'
     },
     // 关联深色主题类，应用对应主题变量
     [`.${darkTheme.className}`]: {
       body: {
         backgroundColor: '$bodyBg'
       }
     }
   });
   

   这里利用darkTheme.className直接获取创建主题时定义的类名（即dark-theme），嵌套后Stitches会自动使用深色主题下的$bodyBg值。

2. 确保主题类正确挂载
   确认<html>或<body>上确实添加了dark-theme类，比如可以在React中通过状态控制：

   // 示例：在App组件中切换主题类
   useEffect(() => {
     document.documentElement.classList.add(darkTheme.className);
     // 切换时用toggle或remove
   }, []);
   

完整修正后的代码 #

import React, { useEffect } from 'react'
import { createStitches, globalCss } from '@stitches/react'

const { createTheme } = createStitches({
  theme: {
    colors: {
      text: 'blue',
      bodyBg: 'lightgray',
    },
  },
})

const darkTheme = createTheme('dark-theme', {
  colors: {
    bodyBg: 'black',
  },
})

const globalStyles = globalCss({
  body: {
    color: '$text',
    backgroundColor: '$bodyBg'
  },
  [`.${darkTheme.className}`]: {
    body: {
      backgroundColor: '$bodyBg'
    }
  }
});

function App() {
  globalStyles()
  
  // 示例：挂载深色主题类到html
  useEffect(() => {
    document.documentElement.classList.add(darkTheme.className);
    return () => {
      document.documentElement.classList.remove(darkTheme.className);
    }
  }, [])

  return (
    <div className='App'>
      <h1>Hello World!</h1>
    </div>
  )
}

export default App

额外说明 #

Stitches的主题变量在全局样式中不会自动响应父元素的主题类，必须通过嵌套对应主题的选择器来明确关联，这样变量才会切换到对应主题的取值。

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