diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index d5c3aa3b6bd7ca..b9c6d946bd02dc 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -74,6 +74,7 @@ $z-layers: (
 	".components-popover": 1000000,
 
 	// Should be above the popover (dropdown)
+	".components-confirm-dialog": 1000001,
 	".reusable-blocks-menu-items__convert-modal": 1000001,
 	".patterns-menu-items__convert-modal": 1000001,
 	".fields-create-template-part-modal": 1000001,
@@ -92,9 +93,6 @@ $z-layers: (
 	".media-editor-modal__footer": 1000001,
 	".components-snackbar-list.media-editor-modal__snackbar": 1000001,
 
-	// Note: The ConfirmDialog component's z-index is being set to 1000001 in packages/components/src/confirm-dialog/styles.ts
-	// because it uses emotion and not sass. We need it to render on top its parent popover.
-
 	// Show media replace flow and similar popovers beneath the media modal when its open.
 	".components-popover.block-editor-media-replace-flow__options": 99999,
 	".components-popover.block-library-video-tracks-editor": 99999,
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 39948051639232..2d02ef3bfb2eb6 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 ### Internal
 
+-   `ConfirmDialog`: Migrate styles from Emotion to an SCSS Module ([#80394](https://github.com/WordPress/gutenberg/pull/80394)).
 -   `InputControl`, `SelectControl`, `CustomSelectControl`: Remove obsolete `__unstable-large` from the public `size` type. The value continues to work at runtime, and is equivalent to the `default` size. ([#80081](https://github.com/WordPress/gutenberg/pull/80081)).
 -   Update `exports` to use subpath patterns instead of deprecated trailing `/` folder mappings ([#80270](https://github.com/WordPress/gutenberg/pull/80270)).
 
diff --git a/packages/components/src/confirm-dialog/component.tsx b/packages/components/src/confirm-dialog/component.tsx
index dec265c15a3b88..1e22b9628e98d2 100644
--- a/packages/components/src/confirm-dialog/component.tsx
+++ b/packages/components/src/confirm-dialog/component.tsx
@@ -15,8 +15,7 @@ import { Flex } from '../flex';
 import Button from '../button';
 import { Text } from '../text';
 import { VStack } from '../v-stack';
-import * as styles from './styles';
-import { useCx } from '../utils/hooks/use-cx';
+import styles from './style.module.scss';
 
 const UnconnectedConfirmDialog = (
 	props: WordPressComponentProps< ConfirmDialogProps, 'div', false >,
@@ -33,8 +32,7 @@ const UnconnectedConfirmDialog = (
 		...otherProps
 	} = useContextSystem( props, 'ConfirmDialog' );
 
-	const cx = useCx();
-	const wrapperClassName = cx( styles.wrapper );
+	const wrapperClassName = styles.wrapper;
 	const cancelButtonRef = useRef< HTMLButtonElement >( null );
 	const confirmButtonRef = useRef< HTMLButtonElement >( null );
 
diff --git a/packages/components/src/confirm-dialog/style.module.scss b/packages/components/src/confirm-dialog/style.module.scss
new file mode 100644
index 00000000000000..e93f4c8bfaef2a
--- /dev/null
+++ b/packages/components/src/confirm-dialog/style.module.scss
@@ -0,0 +1,7 @@
+@use "@wordpress/base-styles/z-index" as *;
+
+// Match the previous Emotion `&&` specificity so this rule continues to
+// override the Modal overlay's default z-index regardless of source order.
+.wrapper.wrapper {
+	z-index: z-index(".components-confirm-dialog");
+}
diff --git a/packages/components/src/confirm-dialog/styles.ts b/packages/components/src/confirm-dialog/styles.ts
deleted file mode 100644
index 68e2a9aa8d4067..00000000000000
--- a/packages/components/src/confirm-dialog/styles.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * The z-index for ConfirmDialog is being set here instead of in
- * packages/base-styles/_z-index.scss, because this component uses
- * emotion instead of sass.
- *
- * ConfirmDialog needs this higher z-index to ensure it renders on top of
- * any parent Popover component.
- */
-export const wrapper = css`
-	&& {
-		z-index: 1000001;
-	}
-`;
diff --git a/packages/components/src/confirm-dialog/test/index.tsx b/packages/components/src/confirm-dialog/test/index.tsx
index 10d37b81411939..e9521f98e3cb90 100644
--- a/packages/components/src/confirm-dialog/test/index.tsx
+++ b/packages/components/src/confirm-dialog/test/index.tsx
@@ -8,6 +8,7 @@ import userEvent from '@testing-library/user-event';
  * Internal dependencies
  */
 import { ConfirmDialog } from '..';
+import styles from '../style.module.scss';
 
 const noop = () => {};
 
@@ -25,6 +26,10 @@ describe( 'Confirm', () => {
 				const elementsTexts = [ 'Are you sure?', 'OK', 'Cancel' ];
 
 				expect( dialog ).toBeInTheDocument();
+				expect( dialog ).toHaveClass( 'components-confirm-dialog' );
+				// Disable reason: Semantic queries can't reach the overlay.
+				// eslint-disable-next-line testing-library/no-node-access
+				expect( dialog.parentElement ).toHaveClass( styles.wrapper );
 
 				elementsTexts.forEach( ( txt ) => {
 					const el = screen.getByText( txt );
diff --git a/tools/eslint/suppressions.json b/tools/eslint/suppressions.json
index a14017eab83b3b..13115e3d830856 100644
--- a/tools/eslint/suppressions.json
+++ b/tools/eslint/suppressions.json
@@ -626,11 +626,6 @@
 			"count": 1
 		}
 	},
-	"packages/components/src/confirm-dialog/styles.ts": {
-		"no-restricted-imports": {
-			"count": 1
-		}
-	},
 	"packages/components/src/context/test/context-system-provider.js": {
 		"no-restricted-imports": {
 			"count": 1