feat(ActionSheet): support popup styles

src/components/action-sheet/action-sheet.tsx

@@ -31,7 +31,9 @@ export type ActionSheetProps = {
   closeOnMaskClick?: boolean
   safeArea?: boolean
   popupClassName?: string
+  /** @deprecated use `styles` instead */
   popupStyle?: CSSProperties
+  styles?: Partial<Record<'body' | 'mask', CSSProperties>>
 } & Pick<
   PopupProps,
   'afterClose' | 'getContainer' | 'destroyOnClose' | 'forceRender'
@@ -51,6 +53,7 @@ const defaultProps = {
 
 export const ActionSheet: FC<ActionSheetProps> = p => {
   const props = mergeProps(defaultProps, p)
+  const { styles } = props
 
   return (
     <Popup
@@ -67,6 +70,8 @@ export const ActionSheet: FC<ActionSheetProps> = p => {
       getContainer={props.getContainer}
       destroyOnClose={props.destroyOnClose}
       forceRender={props.forceRender}
+      bodyStyle={styles?.body}
+      maskStyle={styles?.mask}
     >
       {withNativeProps(
         props,

src/components/action-sheet/index.en.md

@@ -14,8 +14,8 @@ Triggered by user operation, it provides a set of two or more options related to
 
 ### Props
 
-| Name | Description | Type | Default |
-| --- | --- | --- | --- |
+| Name | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
 | actions | The option list of the the action sheet | `Action[]` | `[]` |
 | afterClose | Triggered when completely closed | `() => void` | - |
 | cancelText | The text of the cancel button , if it is null, the cancel button would not be displayed | `ReactNode` | - |
@@ -29,9 +29,9 @@ Triggered by user operation, it provides a set of two or more options related to
 | onClose | Triggered when closed | `() => void` | - |
 | onMaskClick | Triggered when the mask layer is clicked | `() => void` | - |
 | popupClassName | `ActionSheet` popup class name | `string` | - |
-| popupStyle | `ActionSheet` popup style | `React.CSSProperties` | - |
 | safeArea | Whether to enable safe area padding | `boolean` | `true` |
 | visible | To show or hide the action sheet | `boolean` | `false` |
+| styles | Semantic structure style | `Partial<Record<'body' \| 'mask', CSSProperties>>` | - | 5.33.0 |
 
 ### Action
 

src/components/action-sheet/index.zh.md

@@ -14,8 +14,8 @@
 
 ### 属性
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
 | actions | 面板选项列表 | `Action[]` | `[]` |
 | afterClose | 完全关闭后触发 | `() => void` | - |
 | cancelText | 取消按钮文字，如果设置为空则不显示取消按钮 | `ReactNode` | - |
@@ -29,9 +29,9 @@
 | onClose | 关闭时触发 | `() => void` | - |
 | onMaskClick | 点击背景蒙层时触发 | `() => void` | - |
 | popupClassName | `ActionSheet` 弹出层类名 | `string` | - |
-| popupStyle | `ActionSheet` 弹出层样式 | `React.CSSProperties` | - |
 | safeArea | 是否开启安全区适配 | `boolean` | `true` |
 | visible | 显示隐藏 | `boolean` | `false` |
+| styles | 语义化结构 style | `Partial<Record<''body' \| 'mask', CSSProperties>>` | - | 5.33.0 |
 
 ### Action
 

src/components/action-sheet/tests/action-sheet.test.tsx

@@ -232,4 +232,21 @@ describe('ActionSheet', () => {
     })
     expect(onClose).toBeCalled()
   })
+
+  test('should support styles', () => {
+    render(
+      <ActionSheet
+        visible
+        actions={actions}
+        styles={{
+          body: { fontSize: 17 },
+          mask: { fontSize: 18 },
+        }}
+      />
+    )
+    expect(document.querySelector('.adm-mask')).toHaveStyle('fontSize: 17')
+    expect(document.querySelector('.adm-popup-body')).toHaveStyle(
+      'fontSize: 18'
+    )
+  })
 })