docs: ✏️ 添加 MessageBox 自定义按钮样式的文档

src/pages/messageBox/Index.vue

@@ -1,8 +1,9 @@
 <template>
+  <view class="page-message-box">
     <page-wraper>
       <wd-message-box></wd-message-box>
       <wd-message-box selector="wd-message-box-slot">
-      <wd-rate custom-class="custom-rate-class" v-model="rate" />
+        <wd-rate v-model="rate" />
       </wd-message-box>
       <demo-block title="alert">
         <wd-button @click="alert">alert</wd-button>
@@ -36,6 +37,7 @@
         <wd-button @click="withButtonProps">withButtonProps</wd-button>
       </demo-block>
     </page-wraper>
+  </view>
 </template>
 <script lang="ts" setup>
 import { useMessage, useToast } from '@/uni_modules/wot-design-uni'
@@ -113,10 +115,12 @@ function withButtonProps() {
       msg: '自定义按钮样式',
       title: '提示',
       cancelButtonProps: {
+        round: false,
         type: 'error',
         customClass: 'custom-shadow'
       },
       confirmButtonProps: {
+        round: false,
         type: 'success',
         customClass: 'custom-shadow'
       }
@@ -141,13 +145,11 @@ function withSlot() {
 }
 </script>
 <style lang="scss" scoped>
-:deep(.custom-rate-class) {
-  display: block;
-  height: 22px;
-}
-:deep() {
+.page-message-box {
+  :deep() {
     .custom-shadow {
       box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
     }
+  }
 }
 </style>