动态修改主题darkTheme/null无法反应到所有组件

[Alan3344]

Describe the bug

子组件必须在n-layout中,子组件才能被正确的渲染主题,否则组件就默认不可见,这点在 默认主题下 是没有问题的
我查询了官方文档,没有此类描述 (默认主题下 是指初始化被设置了 darkTheme 或者 是未设置)

const theme = ref(darkTheme) // or
const theme = ref(null)

官网所述: 只需要组件包含在n-config-provider中即可同步主题样式

代码片段均来源于官网,第一次使用
默认色

切换后(输入框看到,必须得输入了才会显示元素(这里是n-input))

Steps to reproduce

直接贴上我所陈诉的BUG相关的代码 (Group组件的内容是复制的官网中的一个 表单组件 的代码)

• 我花费了数个小时验证是不成立的,因为我不知道为什么会渲染不正常
• n-global-style 最终也能实现,但是和议题论点应该不匹配

<template>
  <n-config-provider :theme="theme">
    <n-layout>
      <!-- <n-card> -->
      <!-- <n-space> -->
      <!-- https://www.naiveui.com/zh-CN/os-theme/docs/theme -->
      <n-button @click="theme = darkTheme"> 深色 </n-button>
      <n-button @click="theme = null"> 浅色 </n-button>
      <Group />
      <!--n-space中渲染才正确,最后发现在n-layout中才行-->
      <!-- </n-space> -->
      <!-- </n-card> -->
    </n-layout>
    <Group />
  </n-config-provider>
</template>

<script>
import { darkTheme } from "naive-ui";
import { defineComponent, ref } from "vue";
import Group from "./Group.vue";

export default defineComponent({
  components: {
    Group,
  },
  setup() {
    return {
      darkTheme,
      theme: ref(null),
    };
  },
});
</script>

Link to minimal reproduction

https://codesandbox.io/p/sandbox/quan-ju-hua-pei-zhi-config-provider-js-zgrzlk

System Info

undefined

Used Package Manager

npm

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[Alan3344]

https://zgrzlk.csb.app/

[Alan3344]

App.vue

<template>
    <n-loading-bar-provider>
        <n-message-provider>
            <n-notification-provider>
                <n-modal-provider>
                    <n-dialog-provider>
                        <n-config-provider :theme="theme">
                            <!-- <n-global-style /> --> <!--验证问题暂时不用-->
                            <n-layout>
                                <!-- <NGlobalStyle></NGlobalStyle> -->
                                <n-card size="small">
                                    <n-space>
                                        <n-switch
                                            v-model:value="switchTheme"
                                            :value="null"
                                            size="large"
                                        >
                                            <template #checked
                                                >开启亮色</template
                                            >
                                            <template #unchecked>
                                                开启暗色
                                            </template>
                                        </n-switch>
                                    </n-space>
                                </n-card>
                            </n-layout>
                            <!---->
                            <Demo />

                            <n-space vertical>
                                <div>
                                    <n-space>
                                        <n-input placeholder="请输入内容1" />
                                        <n-input placeholder="请输入内容2" />
                                        <n-input placeholder="请输入内容3" />
                                    </n-space>
                                </div>
                                <n-layout
                                    ><n-space>
                                        <n-input placeholder="请输入内容1" />
                                        <n-input placeholder="请输入内容2" />
                                        <n-input placeholder="请输入内容3"
                                    /></n-space>
                                </n-layout>
                            </n-space>

                            <!--  -->
                        </n-config-provider>
                    </n-dialog-provider>
                </n-modal-provider>
            </n-notification-provider>
        </n-message-provider>
    </n-loading-bar-provider>
</template>

<script>
import { defineComponent } from "vue"
import { darkTheme } from "naive-ui"
import { ref } from "vue"
import Demo from "./components/Demo.vue"
// import Group from "./components/Group.vue"

export default defineComponent({
    components: {
        Demo,
        // Group,
    },
    setup() {
        return {
            darkTheme,
            theme: ref(null),
            switchTheme: ref(false),
        }
    },
    watch: {
        switchTheme(newValue) {
            this.theme = newValue ? darkTheme : null
            console.log(
                `newValue: ${newValue} 模式切换为: ${
                    newValue ? "暗色" : "亮色"
                }`
            )
        },
    },
})
</script>

使用prettier格式化

[Sepush]

n-config-provider 只有一个唯一的子节点 应该也是可以的 比如整体包在一个dom节点下

[Zheng-Changfu]

应该是没有问题的，包在 layout 里面是因为 layout 的背景颜色跟随主题，而不包裹在 layout 里面是因为 dom 本身没有背景颜色造成的错觉，我这里有个例子，我只是给 dom 添加了一个背景 https://play.pro-components.cn/#eNqtV01v3EQY/itTX7yR1usKOKBls0BDQEF0qULFBXNw7NldN/bYzIw3aUMkKtFDpKYpCsciqAAVIZWUiirl0l/Dbrb/gvcdf+zYm2zaqId07fdrnvfr8XTH+DBJWqOUGm2jIzweJJIIKtOk67AgSmIuyQ7xXb55fUgj2uytxKwfDK7xeBT4lDd7V1IpY9bsfebejFPZ7F2lQrgDWhiQXdLncUQcg7nBiFpp4Bjv6ZFpP2B0JYZ3RplsEk77Mx+ApZt/wuM0KXQtW70idGXjMC9mQhKJOMkyBmqwNAyXHNaxs8QgJXiRNEpCV1J4I4R0mAV+kJKVFJDbKsSyY6hfx8gM0TLKkitNZ5pQpZ+/g+SSZanQLve7xLLmFCJxPTqvGUqZiLZtb21ttVTB0qDlxZF9a2it9OxYWAqS7ceesLNE9QjM2lDdIB94YeBtFhlAMcoGQjZkcvz3dO8p6diF/atEwFIq52d3znLO2mNXMsoz/e/548nzp5OfDyd7+5PHv548/Ks5efDd+P698cEPJ/eejB/8UZQQLff2pw/vzhUNTjyjaqiqVRpFlZ7U0KH+1G6qWNWBAHnH1qbGaBpSZDatGyJmsDk76OoY0KokCCn/PJEBDKNjtInSoM4Nw3jrUyWTPKXNQu4Nqbd5ivyG2EaZY1zjVFA+gtaVOunyAZWZevWLHt2G51IZxX4agvUC5ToVcZgixszsSsp8gK3ZKbRrau0CNrguVrclZaJICoGi5a6yV3uKK3xW6jO4b7feUX4O24Uqlgtc5x4SumyAwwdxug4vCUDeTCiQxscxj9Zw13OiMAtuMTXbHZIKmrNRs4cu2b9r0Mlmb40lyFYFe627fhArOPlzpjjngEXkZUJayhr/Mmbqw+nrYKG4qVMm8a3arW5OVqW1CG7lNNYxRQT9MMHSjKgfpJF6DLGqZrdRyDRfPOlLN0wxgCLCHdRlG0OwLhy7o4kIYW5E28Q0m1UxFA+luhCarr0lQ8i9arKrIcl3DHDMutHQ9BymUYD2VQHWhJjdN2nAqV9sT02dnw8Ap0fH0xeH4zu/jx8dju/v1xMl4B8MBniwuRGmvJJyPem8Lm8CzL//vHzx/QIwX5kBjqrZzGF9XcN1bmdqIBdCPAXgyY/Ppkc/jQ+OT365XYc5B7ICToOmHvGvnzIP+YGQoYuUA0Ma+MCqK/i1acDBV2No/uoItmmpipy2Ek5R/hHtu2kosyEqtPlqtUY49O/jjwrbaFDOYy6WyHK3XoigTxqXCvVcJ/NKtETqefDYMBXSbMfOqD5gDAXQUz0UDnoc0lYYDwo4Z52m1A1zjakEFp6WLZmmmF1y8lprFx1884MR8UJXCODVxHrrcrJNNgYWzJS64eSx4ALAkf6sAXJhIR1Z8NmgYVtVF9yRmhwj08675jeI0hi5SzuCkPGTg9IJvra617nRMq6rhIMbw4XDKQ6tgvvt0TnRZmJVpELKLBzCwhdIF8LnY1nUCoaOhfDFKN7aobtBQ2sr8OUQrN+9PDNsq4rnIRSVazpFmqBTv5oc+7KgPRjKCmAq4PMK54JlRoWOQRJXIUDihXtnduktSwKuar3n5qDE1tIcCcycR4dxCDcnsNE5F5Rw/9KqWyI6B6YiyRpM2JcLoVR+p4MsjrkQSJ0oZ1AVCb8uztypBrJ2wOuArB6f74ArJbfwRgWxMxFELe/9p/BzJQ1CXv55d3p0W4us/ZdgAbJClrGSDbSUP5V0Zez+D+gi5KE=