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

Question

Darkmode 在我的 React 应用程序中无处不在，除了无头 ui 组合框。我将样式化的 h1 放在同一个组件中并应用 dark:bg-red-200（和任何其他样式）没问题。组合框接受所有其他顺风实用程序，包括 hover: 之类的属性，但不接受 dark: 属性。

Answer 1

对于其他人（比如我）绊倒了这个：

• 例如Dialog-component（我假设还有其他组件）在 body 标签中呈现（source）
• 如果您使用"the class strategy" 来处理暗模式（即向包装器添加“暗”类），这将是一个问题，因为该类不再是Dialog 的父类

我最终使用的解决方案：

我最终将 useEffect 用于add the dark class to the body：

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