diff --git a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap
index c6750731c946..b2c2fa1139cf 100644
--- a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap
+++ b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`[React 18] EuiDraggable renders 1`] = `
     tabindex="0"
   >
     <div
-      class="euiDraggable__item"
+      class="euiDraggable__item emotion-euiDraggable__item"
     >
       Hello
     </div>
diff --git a/src/components/drag_and_drop/_draggable.scss b/src/components/drag_and_drop/_draggable.scss
index ff115a9340e2..ad3eff01b36d 100644
--- a/src/components/drag_and_drop/_draggable.scss
+++ b/src/components/drag_and_drop/_draggable.scss
@@ -3,18 +3,4 @@
   &.euiDraggable--hasCustomDragHandle > .euiDraggable__item [data-react-beautiful-dnd-drag-handle]:focus {
     @include euiFocusRing;
   }
-
-  .euiDraggable__item {
-    &.euiDraggable__item--isDisabled {
-      cursor: not-allowed;
-    }
-
-    &.euiDraggable__item--isDragging {
-      // TODO: Resolve below
-      // Commenting this out for now,
-      // I'm thinking about adding an optional prop to auto-add these styles versus always having them
-      // @include euiBottomShadow;
-      // @include euiFocusRing;
-    }
-  }
 }
diff --git a/src/components/drag_and_drop/draggable.styles.ts b/src/components/drag_and_drop/draggable.styles.ts
index c3709e6fecb8..032353622472 100644
--- a/src/components/drag_and_drop/draggable.styles.ts
+++ b/src/components/drag_and_drop/draggable.styles.ts
@@ -43,3 +43,10 @@ export const euiDraggableStyles = (euiThemeContext: UseEuiTheme) => {
     },
   };
 };
+
+export const euiDraggableItemStyles = {
+  euiDraggable__item: css``,
+  disabled: css`
+    cursor: not-allowed;
+  `,
+};
diff --git a/src/components/drag_and_drop/draggable.tsx b/src/components/drag_and_drop/draggable.tsx
index 1356e737f3b9..35073ed3830a 100644
--- a/src/components/drag_and_drop/draggable.tsx
+++ b/src/components/drag_and_drop/draggable.tsx
@@ -10,17 +10,16 @@ import React, {
   CSSProperties,
   FunctionComponent,
   ReactElement,
-  cloneElement,
   useContext,
 } from 'react';
 import { Draggable, DraggableProps } from '@hello-pangea/dnd';
 import classNames from 'classnames';
 
-import { useEuiTheme } from '../../services';
+import { useEuiTheme, cloneElementWithCss } from '../../services';
 import { CommonProps } from '../common';
 
 import { EuiDroppableContext } from './droppable';
-import { euiDraggableStyles } from './draggable.styles';
+import { euiDraggableStyles, euiDraggableItemStyles } from './draggable.styles';
 
 const SPACINGS = ['none', 's', 'm', 'l'] as const;
 export type EuiDraggableSpacing = (typeof SPACINGS)[number];
@@ -133,11 +132,15 @@ export const EuiDraggable: FunctionComponent<EuiDraggableProps> = ({
                   : provided.dragHandleProps?.tabIndex
               }
             >
-              {cloneElement(DraggableElement, {
+              {cloneElementWithCss(DraggableElement, {
                 className: classNames(
                   DraggableElement.props.className,
                   childClasses
                 ),
+                css: [
+                  euiDraggableItemStyles.euiDraggable__item,
+                  isDragDisabled && euiDraggableItemStyles.disabled,
+                ],
               })}
             </div>
             {cloneItems && isDragging && (