diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/default_edge.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/default_edge.tsx
index 898e12b5b4c01..6826c47b270ce 100644
--- a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/default_edge.tsx
+++ b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/default_edge.tsx
@@ -49,6 +49,8 @@ export function DefaultEdge({
         path={edgePath}
         style={{
           stroke: euiTheme.colors[color],
+        }}
+        css={{
           strokeDasharray: '2,2',
         }}
         markerEnd={
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/styles.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/styles.tsx
index 58ecea3bc3bea..5a3e2f8b72b21 100644
--- a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/styles.tsx
+++ b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/styles.tsx
@@ -128,7 +128,7 @@ export const SvgDefsMarker = () => {
   const { euiTheme } = useEuiTheme();
 
   return (
-    <svg style={{ position: 'absolute', width: 0, height: 0 }}>
+    <svg css={{ position: 'absolute', width: 0, height: 0 }}>
       <defs>
         <Marker id="primary" color={euiTheme.colors.primary} />
         <Marker id="danger" color={euiTheme.colors.danger} />
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/edge_group_node.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/edge_group_node.tsx
index 97b8928c421e1..a3dd064d16ab7 100644
--- a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/edge_group_node.tsx
+++ b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/edge_group_node.tsx
@@ -16,7 +16,7 @@ export const EdgeGroupNode: React.FC<NodeProps> = memo((props: NodeProps) => {
     <>
       <NodeResizeControl
         position="right"
-        style={{ borderColor: 'transparent', background: 'transparent' }}
+        css={{ borderColor: 'transparent', background: 'transparent' }}
       >
         <Handle
           type="target"
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/styles.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/styles.tsx
index 74b3f3ebe0156..eed8b50c9038c 100644
--- a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/styles.tsx
+++ b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/styles.tsx
@@ -177,7 +177,7 @@ export const NodeIcon = ({ icon, color, x, y }: NodeIconProps) => {
   return (
     <foreignObject x={x} y={y} width="50" height="50">
       <div
-        style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}
+        css={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}
       >
         <EuiIcon type={getSpanIcon(icon) ?? icon} size="l" color={color ?? 'primary'} />
       </div>