Add dialogStyle and contentStyle props to Modal

Author: tcbegley

src/components/modal/Modal.js

@@ -32,6 +32,10 @@ const Modal = props => {
     style,
     zindex,
     zIndex,
+    dialogStyle,
+    dialog_style,
+    contentStyle,
+    content_style,
     ...otherProps
   } = props;
 
@@ -45,6 +49,8 @@ const Modal = props => {
     <RBModal
       animation={fade}
       dialogAs={tag}
+      dialogStyle={dialog_style || dialogStyle}
+      contentStyle={content_style || contentStyle}
       dialogClassName={class_name || className}
       className={modal_class_name || modalClassName}
       contentClassName={content_class_name || contentClassName}
@@ -87,6 +93,26 @@ Modal.propTypes = {
    */
   style: PropTypes.object,
 
+  /**
+   * Inline CSS styles to apply to the dialog
+   */
+  dialog_style: PropTypes.object,
+
+  /**
+   * Inline CSS styles to apply to the dialog
+   */
+  dialogStyle: PropTypes.object,
+
+  /**
+   * Inline CSS styles to apply to the content
+   */
+  content_style: PropTypes.object,
+
+  /**
+   * Inline CSS styles to apply to the content
+   */
+  contentStyle: PropTypes.object,
+
   /**
    * Often used with CSS to style elements with common properties.
    */

src/private/Modal.js

@@ -18,9 +18,10 @@ import BaseModal from '@restart/ui/Modal';
 import {getSharedManager} from 'react-bootstrap/BootstrapModalManager';
 import Fade from 'react-bootstrap/Fade';
 import ModalContext from 'react-bootstrap/ModalContext';
-import ModalDialog from 'react-bootstrap/ModalDialog';
 import {useBootstrapPrefix, useIsRTL} from 'react-bootstrap/ThemeProvider';
 
+import ModalDialog from './ModalDialog';
+
 const defaultProps = {
   show: false,
   backdrop: true,
@@ -51,6 +52,8 @@ const Modal = React.forwardRef(
       dialogClassName,
       contentClassName,
       children,
+      dialogStyle,
+      contentStyle,
       dialogAs: Dialog,
       'data-bs-theme': dataBsTheme,
       'aria-labelledby': ariaLabelledby,
@@ -271,6 +274,8 @@ const Modal = React.forwardRef(
           onMouseDown={handleDialogMouseDown}
           className={dialogClassName}
           contentClassName={contentClassName}
+          style={dialogStyle}
+          contentStyle={contentStyle}
         >
           {children}
         </Dialog>

src/private/ModalDialog.js

@@ -0,0 +1,56 @@
+// vendored from React-Bootstrap to allow us to set content style
+// https://github.com/react-bootstrap/react-bootstrap/blob/be23c304fa40ddb209919b0faac1e5dd8cef53ad/src/ModalDialog.tsx
+import React from 'react';
+
+import classNames from 'classnames';
+import {useBootstrapPrefix} from 'react-bootstrap/ThemeProvider';
+
+const ModalDialog = React.forwardRef(
+  (
+    {
+      bsPrefix,
+      className,
+      contentClassName,
+      centered,
+      size,
+      fullscreen,
+      children,
+      scrollable,
+      contentStyle,
+      ...props
+    },
+    ref
+  ) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'modal');
+    const dialogClass = `${bsPrefix}-dialog`;
+
+    const fullScreenClass =
+      typeof fullscreen === 'string'
+        ? `${bsPrefix}-fullscreen-${fullscreen}`
+        : `${bsPrefix}-fullscreen`;
+
+    return (
+      <div
+        {...props}
+        ref={ref}
+        className={classNames(
+          dialogClass,
+          className,
+          size && `${bsPrefix}-${size}`,
+          centered && `${dialogClass}-centered`,
+          scrollable && `${dialogClass}-scrollable`,
+          fullscreen && fullScreenClass
+        )}
+      >
+        <div
+          className={classNames(`${bsPrefix}-content`, contentClassName)}
+          style={contentStyle}
+        >
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+export default ModalDialog;