feat: classNames & styles support content (#428)

Author: kiner-tang

src/DrawerPopup.tsx

@@ -313,8 +313,11 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
               id={id}
               containerRef={motionRef}
               prefixCls={prefixCls}
-              className={className}
-              style={style}
+              className={classNames(className, drawerClassNames?.content)}
+              style={{
+                ...style,
+                ...styles?.content,
+              }}
               {...eventHandlers}
             >
               {children}

src/inter.ts

@@ -1,9 +1,11 @@
 export interface DrawerClassNames {
   mask?: string;
   wrapper?: string;
+  content?: string;
 }
 
 export interface DrawerStyles {
   mask?: React.CSSProperties;
   wrapper?: React.CSSProperties;
+  content?: React.CSSProperties;
 }

tests/index.spec.tsx

@@ -401,6 +401,7 @@ describe('rc-drawer-menu', () => {
       <Drawer classNames={{
         wrapper: 'customer-wrapper',
         mask: 'customer-mask',
+        content: 'customer-content',
       }} open />
     );
     expect(
@@ -409,13 +410,17 @@ describe('rc-drawer-menu', () => {
     expect(
       document.querySelector('.rc-drawer-mask')
     ).toHaveClass('customer-mask');
+    expect(
+      document.querySelector('.rc-drawer-content')
+    ).toHaveClass('customer-content');
     unmount();
   });
   it('should support styles', () => {
     const { unmount } = render(
       <Drawer styles={{
         wrapper: { background: 'red' },
         mask: { background: 'blue' },
+        content: { background: 'green' },
       }} open />
     );
     expect(
@@ -424,6 +429,9 @@ describe('rc-drawer-menu', () => {
     expect(
       document.querySelector('.rc-drawer-mask')
     ).toHaveStyle('background: blue');
+    expect(
+      document.querySelector('.rc-drawer-content')
+    ).toHaveStyle('background: green');
     unmount();
   });
 });