fix(config-provider): inherit cls-prefix from parent by default

CHANGELOG.en-US.md

@@ -4,6 +4,10 @@
 
 `xxxx-xx-xx`
 
+### Breaking Changes
+
+- Fix `n-config-provider` inherit the class prefix from it's parent by default, closes [#5970](https://github.com/tusen-ai/naive-ui/issues/5970).
+
 ### Fixes
 
 - Fix `n-infinite-scroll` bottoming out judgment error, closes [#6133](https://github.com/tusen-ai/naive-ui/issues/6133).

CHANGELOG.zh-CN.md

@@ -4,6 +4,10 @@
 
 `xxxx-xx-xx`
 
+### Breaking Changes
+
+- 修复 `n-config-provider` 默认继承父级的类前缀 `cls-prefix`, 关闭 [#5970](https://github.com/tusen-ai/naive-ui/issues/5970)
+
 ### Fixes
 
 - 修复 `n-infinite-scroll` 组件触底判断错误，关闭 [#6133](https://github.com/tusen-ai/naive-ui/issues/6133)

src/config-provider/demos/enUS/cls-prefix.demo.vue

@@ -0,0 +1,26 @@
+<markdown>
+# Component's class prefix
+If you don't set the `cls-prefix` prop of `n-config-provider`, it will inherit the class prefix from its parent by default.
+
+Note that this prop is not reactive.
+</markdown>
+<template>
+  <n-config-provider cls-prefix="myPrefix" abstract>
+    <n-flex vertical>
+      <n-button ref="button1Ref">
+        Oops · {{ button1Ref?.mergedClsPrefix }}
+      </n-button>
+      <n-config-provider abstract>
+        <n-button ref="button2Ref">
+          Oops Oops · {{ button2Ref?.mergedClsPrefix }}
+        </n-button>
+      </n-config-provider>
+    </n-flex>
+  </n-config-provider>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { NButton } from 'naive-ui'
+const button1Ref = ref<InstanceType<typeof NButton>>()
+const button2Ref = ref<InstanceType<typeof NButton>>()
+</script>

src/config-provider/demos/enUS/index.demo-entry.md

@@ -10,6 +10,7 @@ For more info about theming, see [Customizing Theme](../docs/customize-theme).
 theme.vue
 namespace.vue
 inherit-theme.vue
+cls-prefix.vue
 os-theme.vue
 language.vue
 transparent.vue
@@ -24,7 +25,7 @@ inline-theme-disabled.vue
 | --- | --- | --- | --- | --- |
 | abstract | `boolean` | `false` | If `n-config-provider` has no wrapper DOM |  |
 | breakpoints | `{ [k: string]: number }` | `{ xs: 0, s: 640, m: 1024, l: 1280, xl: 1536, xxl: 1920 }` | Responsive breakpoints, it will be used in `n-grid`. The prop is not responsive, you need to set it on its first mount. |  |
-| cls-prefix | `string` | `n` | The class prefix of all inner components. It's applied in the first time. |  |
+| cls-prefix | `string` | `undefined` | The class prefix of all inner components. It's applied in the first time. |  |
 | date-locale | `DateLocale \| null` | `undefined` | The date locale object to be consumed by its child. If set to `null` it will use the default `dateEnUS` locale. If set to `undefined` it will inherit its parent `n-config-provider`. |  |
 | inline-theme-disabled | `boolean` | `false` | Whether to disabled inline theme CSS variables. If you won't change theme overrides frequently in client side, and need SSR or make devtools looks clear. You can enable the prop. Note that the prop is not responsive. | 2.26.0 |
 | katex | `object` | `undefined` | Katex object for `n-equation`. | 2.34.0 |

src/config-provider/demos/zhCN/cls-prefix.demo.vue

@@ -0,0 +1,27 @@
+<markdown>
+# 组件的类前缀
+
+如果不设置 `n-config-provider` 的类前缀 `cls-prefix`，则默认继承父级的类前缀。
+
+注意，该属性不是响应式的。
+</markdown>
+<template>
+  <n-config-provider cls-prefix="myPrefix" abstract>
+    <n-flex vertical>
+      <n-button ref="button1Ref">
+        噢 {{ button1Ref?.mergedClsPrefix }}
+      </n-button>
+      <n-config-provider abstract>
+        <n-button ref="button2Ref">
+          噢噢 {{ button2Ref?.mergedClsPrefix }}
+        </n-button>
+      </n-config-provider>
+    </n-flex>
+  </n-config-provider>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { NButton } from 'naive-ui'
+const button1Ref = ref<InstanceType<typeof NButton>>()
+const button2Ref = ref<InstanceType<typeof NButton>>()
+</script>

src/config-provider/demos/zhCN/index.demo-entry.md

@@ -10,6 +10,7 @@
 theme.vue
 namespace.vue
 inherit-theme.vue
+cls-prefix.vue
 os-theme.vue
 language.vue
 transparent.vue
@@ -24,7 +25,7 @@ inline-theme-disabled.vue
 | --- | --- | --- | --- | --- |
 | abstract | `boolean` | `false` | 是否不存在 DOM 包裹 |  |
 | breakpoints | `{ [k: string]: number }` | `{ xs: 0, s: 640, m: 1024, l: 1280, xl: 1536, xxl: 1920 }` | 屏幕响应式断点，对 `n-grid` 生效。这个属性不是响应式的，你需要在组件第一次挂载时就设定好 |  |
-| cls-prefix | `string` | `n` | 内部所有组件的类的前缀，仅首次设定会生效 |  |
+| cls-prefix | `string` | `undefined` | 内部所有组件的类的前缀，仅首次设定会生效 |  |
 | date-locale | `DateLocale \| null` | `undefined` | 对后代组件生效的日期语言对象，为 `null` 时会使用默认 `dateEnUS`，为 `undefined` 时会继承上级 `n-config-provider` |  |
 | inline-theme-disabled | `boolean` | `false` | 是否禁用 inline css 主题变量，如果你不会频繁调整主题变量，并且需要 SSR 或者想让 devtools 看起来更干净，可以打开这个选项。注意，这个属性不是响应式的 | 2.26.0 |
 | katex | `object` | `undefined` | 公式组件需要的 katex 对象 | 2.34.0 |

src/config-provider/src/ConfigProvider.ts

@@ -35,7 +35,7 @@ export const configProviderProps = {
     type: Boolean as PropType<boolean | undefined>,
     default: undefined
   },
-  clsPrefix: { type: String, default: defaultClsPrefix },
+  clsPrefix: String,
   locale: Object as PropType<NLocale | null>,
   dateLocale: Object as PropType<NDateLocale | null>,
   namespace: String,