diff --git a/packages/react/src/components/ComposedModal/ComposedModal-test.js b/packages/react/src/components/ComposedModal/ComposedModal-test.js
index 2b195941084b..b4a58a80c16c 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal-test.js
+++ b/packages/react/src/components/ComposedModal/ComposedModal-test.js
@@ -33,6 +33,16 @@ describe('ComposedModal', () => {
);
});
+ it('supports a custom class on the modal body', () => {
+ render(
+
+
+
+ );
+
+ expect(screen.getByTestId('modal-body')).toHaveClass('custom-class');
+ });
+
it('should spread props onto the outermost div', () => {
render();
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.tsx b/packages/react/src/components/ComposedModal/ComposedModal.tsx
index a5295638ceae..9587badedea3 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.tsx
+++ b/packages/react/src/components/ComposedModal/ComposedModal.tsx
@@ -53,12 +53,15 @@ export const ModalBody = React.forwardRef(
const prefix = usePrefix();
const contentRef = useRef(null);
const [isScrollable, setIsScrollable] = useState(false);
- const contentClass = cx({
- [`${prefix}--modal-content`]: true,
- [`${prefix}--modal-content--with-form`]: hasForm,
- [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
- customClassName,
- });
+ const contentClass = cx(
+ {
+ [`${prefix}--modal-content`]: true,
+ [`${prefix}--modal-content--with-form`]: hasForm,
+ [`${prefix}--modal-scroll-content`]:
+ hasScrollingContent || isScrollable,
+ },
+ customClassName
+ );
useIsomorphicEffect(() => {
if (contentRef.current) {