fix(modal): cannot add custom classes (#747)

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -18,6 +18,7 @@
 ### Fixes
 
 - Fix `n-dropdown` click exception when using v-for.
+- Fix `n-modal` cannot customize classes when use preset, closes [#744](https://github.com/TuSimple/naive-ui/issues/744).
 - Fix `n-cascader` menu width shifts in virtual scroll mode, closes [#728](https://github.com/TuSimple/naive-ui/issues/728).
 - Fix `n-input` type of `type` errors.
 

CHANGELOG.zh-CN.md

@@ -18,6 +18,7 @@
 ### Fixes
 
 - 修复 `n-dropdown` 循环渲染时点击异常
+- 修复 `n-modal` 使用预设时无法自定义类，关闭 [#744](https://github.com/TuSimple/naive-ui/issues/744)
 - 修复 `n-cascader` 的菜单虚拟滚动时宽度展示不一致问题，关闭 [#728](https://github.com/TuSimple/naive-ui/issues/728)
 - 修复 `n-input` 的 `type` 类型错误
 

src/modal/demos/enUS/preset-card.demo.md

@@ -5,6 +5,7 @@ Modal has some presets, which means you can use props & slots of the preset afte
 ```html
 <n-button @click="showModal = true"> Start Me up </n-button>
 <n-modal
+  class="custom-card"
   v-model:show="showModal"
   preset="card"
   :style="bodyStyle"

src/modal/demos/zhCN/preset-card.demo.md

@@ -5,6 +5,7 @@
 ```html
 <n-button @click="show"> 来吧 </n-button>
 <n-modal
+  class="custom-card"
   v-model:show="showModal"
   preset="card"
   :style="bodyStyle"

src/modal/src/BodyWrapper.tsx

@@ -206,7 +206,10 @@ export default defineComponent({
                           this.preset === 'dialog' ? (
                             <NDialog
                               {...this.$attrs}
-                              class={`${mergedClsPrefix}-modal`}
+                              class={[
+                                `${mergedClsPrefix}-modal`,
+                                this.$attrs.class
+                              ]}
                               ref="bodyRef"
                               theme={this.mergedTheme.peers.Dialog}
                               themeOverrides={
@@ -220,7 +223,10 @@ export default defineComponent({
                             <NCard
                               {...this.$attrs}
                               ref="bodyRef"
-                              class={`${mergedClsPrefix}-modal`}
+                              class={[
+                                `${mergedClsPrefix}-modal`,
+                                this.$attrs.class
+                              ]}
                               theme={this.mergedTheme.peers.Card}
                               themeOverrides={
                                 this.mergedTheme.peerOverrides.Card