暗模式不适用于顺风无头 UI

Question

深色模式可以在我的 React 应用程序中的任何地方工作，除了无头 ui 组合框。我将样式化的 h1 放在同一个组件中并应用dark:bg-red-200（以及任何其他样式）没有问题。组合框接受所有其他顺风实用程序，包括属性（hover:但不包括dark:属性）。

Answer 1

对于其他人（例如我）偶然发现这一点：

• 例如Dialog- 组件（我假设还有其他组件）在 body 标记中正确渲染（源代码）
• 如果您使用“类策略”来处理暗模式（即向包装器添加“暗”类），这将是一个问题，因为该类不再是 的父类Dialog（因为您的包装器也只是身体）

我最终使用的解决方案：

我最终使用 useEffect 将dark 类添加到 body 中：

useEffect(() => {
  if(darkMode){
    document.body.classList.add('dark')
  }else{
    document.body.classList.remove('dark')
  }
}, [darkMode])