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

Question

暗模式在我的反应应用程序中的任何地方都可以使用，除了在无头 UI 组合框中。我将样式化的 h1 放在同一个组件中并应用dark:bg-red-200(和任何其他样式)没有问题。组合框接受所有其他顺风实用程序，包括hover:等属性，但不接受dark:属性。

Answer 1

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

• 例如，Dialog组件(我假设其他组件)直接在正文标签(源)中呈现
• 如果您使用"类策略"来处理暗模式(即向包装器添加"暗"类)，这将是一个问题，因为该类不再是Dialog的父级

我最终使用的解决方案：

我最终使用 useEffect 将黑暗类添加到正文中：

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

Answer 2

VueJs 问题：

我相信发生这种情况是因为对话框(模态)是自动注入的构建文件的一部分。

VueJS 解决方案：

我只是偶然发现了 vue 的类似问题，并通过在作用域组件中添加一个添加到App包装器的类似变量来修复它，:class="isDark ? 'dark' : ''"如下：

<Dialog
:class="isDark ? 'dark' : ''"
as="div"
class="relative z-[1000]"
@close="modalOpen = false"
>
</Dialog>

请注意，在我的代码中，isDark是一个来自商店的布尔变量。 周围还有一个观察者来聆听主题的变化。

data() {
return {
isDark: this.$store.getters.getIsDark,
};
},

我的观察者：

watch: {
// whenever isDark changes, this function will run
"$store.state.isDark": function () {
this.isDark = this.$store.state.isDark;
},
},

像魅力一样工作！