feat(message): Add container-style prop to n-message-provider (#831)

* feat(message): Add `container-style` prop to `n-message-provider`

* Update CHANGELOG.zh-CN.md

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

* Remove default value from containerStyle

Co-authored-by: Yugang Cao <34439652+Talljack@users.noreply.github.com>

Co-authored-by: 07akioni <07akioni2@gmail.com>
Co-authored-by: Yugang Cao <34439652+Talljack@users.noreply.github.com>

CHANGELOG.en-US.md

@@ -2,6 +2,10 @@
 
 ## Pending
 
+### Feats
+
+- `n-message-provider` add `container-style` prop
+
 ### Fixes
 
 - Fix `n-rate` half star overlays star background in dark mode.

CHANGELOG.zh-CN.md

@@ -1,8 +1,11 @@
 # CHANGELOG
 
-
 ## Pending
 
+### Feats
+
+- `n-message-provider` 新增 `container-style` 属性
+
 ### Fixes
 
 - 修复 `n-rate` 在深色模式下半个星星重叠

src/message/src/MessageProvider.tsx

@@ -11,7 +11,8 @@ import {
   ExtractPropTypes,
   renderSlot,
   Ref,
-  PropType
+  PropType,
+  CSSProperties
 } from 'vue'
 import { createId } from 'seemly'
 import { ExtractPublicPropTypes, omit } from '../../_utils'
@@ -71,7 +72,8 @@ const messageProviderProps = {
     default: 3000
   },
   max: Number,
-  closable: Boolean
+  closable: Boolean,
+  containerStyle: [String, Object] as PropType<string | CSSProperties>
 }
 
 export type MessageProviderProps = ExtractPublicPropTypes<
@@ -164,6 +166,7 @@ export default defineComponent({
             <div
               class={`${this.mergedClsPrefix}-message-container`}
               key="message-container"
+              style={this.containerStyle}
             >
               {this.messageList.map((message) => {
                 return (

src/message/tests/Message.spec.tsx

@@ -111,4 +111,31 @@ describe('message-provider', () => {
       done()
     })
   })
+
+  it('props.container-style', (done) => {
+    const Test = defineComponent({
+      setup () {
+        const message = useMessage()
+        message.info('string')
+      },
+      render () {
+        return null
+      }
+    })
+    const wrapper = mount(NMessageProvider, {
+      props: {
+        'container-style': 'padding: 24px'
+      },
+      slots: {
+        default: () => <Test />
+      }
+    })
+    void nextTick(() => {
+      const container = document.querySelector('.n-message-container')
+      expect(container).not.toBe(null)
+      expect(container.attributes.style.value).toContain('padding: 24px')
+      wrapper.unmount()
+      done()
+    })
+  })
 })