From 18240554259f921bf52ce81965e52f71b47c7d1d Mon Sep 17 00:00:00 2001
From: Rasmus Schultz <mindplay-dk@users.noreply.github.com>
Date: Thu, 3 Apr 2025 16:00:42 +0200
Subject: [PATCH] Add example with type-safe destructuring

---
 docs/typescript.mdx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/docs/typescript.mdx b/docs/typescript.mdx
index 0e3b761089..5f3518791d 100644
--- a/docs/typescript.mdx
+++ b/docs/typescript.mdx
@@ -220,6 +220,26 @@ const StyledOriginal = styled(Original, {
 ;<StyledOriginal prop1="1" prop2={2} />
 ```
 
+Alternatively, you can destructure and split custom props from intrinsic props:
+
+```ts
+import { ComponentProps } from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+type InputWrapperProps = ComponentProps<'div'> & { disabled?: boolean };
+
+const InputWrapper = styled(
+  ({ disabled, ...rest }: InputWrapperProps) => <div role="group" {...rest} />
+)`
+  ${({ disabled }) => css`
+    input {
+      background: ${disabled ? 'red' : 'white'};
+    }
+  `}
+`;
+```
+
 ### Passing props when styling a React component
 
 ```tsx