feat: support root style (#469)

* feat: support root style * add test * update
react-component · Jan 10, 2025 · d5ee44b · d5ee44b
1 parent f8c0131
commit d5ee44b
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 2 deletions.
diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx
@@ -41,6 +41,7 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
     maskStyle,
     maskProps,
     rootClassName,
+    rootStyle,
     classNames: modalClassNames,
     styles: modalStyles,
   } = props;
@@ -175,6 +176,7 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
   return (
     <div
       className={classNames(`${prefixCls}-root`, rootClassName)}
+      style={rootStyle}
       {...pickAttrs(props, { data: true })}
     >
       <Mask

diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx
@@ -11,6 +11,7 @@ export type IDialogPropTypes = {
   className?: string;
   keyboard?: boolean;
   style?: CSSProperties;
+  rootStyle?: CSSProperties;
   mask?: boolean;
   children?: React.ReactNode;
   afterClose?: () => any;

diff --git a/tests/__snapshots__/index.spec.tsx.snap b/tests/__snapshots__/index.spec.tsx.snap
@@ -1,8 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`dialog add rootClassName should render correct 1`] = `
+exports[`dialog add rootClassName and rootStyle should render correct 1`] = `
 <div
   class="rc-dialog-root customize-root-class"
+  style="font-size: 20px;"
 >
   <div
     class="rc-dialog-mask"

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -36,12 +36,13 @@ describe('dialog', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
-  it('add rootClassName should render correct', () => {
+  it('add rootClassName and rootStyle should render correct', () => {
     const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
     const wrapper = mount(
       <Dialog
         visible
         rootClassName="customize-root-class"
+        rootStyle={{ fontSize: 20 }}
         style={{ width: 600 }}
         height={903}
         wrapStyle={{ fontSize: 10 }}
@@ -56,6 +57,7 @@ describe('dialog', () => {
     );
     expect(wrapper.find('.customize-root-class').length).toBeTruthy();
     expect(wrapper.find('.rc-dialog-wrap').props().style.fontSize).toBe(10);
+    expect(wrapper.find('.rc-dialog-root').props().style.fontSize).toBe(20);
     expect(wrapper.find('.rc-dialog').props().style.height).toEqual(903);
     expect(wrapper.find('.rc-dialog').props().style.width).toEqual(600);
   });