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

Syl*_*lin 1 reactjs tailwind-css headless-ui

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

st_*_*han 6

对于其他人(例如我)偶然发现这一点:

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

我最终使用的解决方案:

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

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