Skip to content

Commit 1824055

Browse files
authored
Add example with type-safe destructuring
1 parent cce67ec commit 1824055

File tree

1 file changed

+20
-0
lines changed

1 file changed

+20
-0
lines changed

docs/typescript.mdx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,26 @@ const StyledOriginal = styled(Original, {
220220
;<StyledOriginal prop1="1" prop2={2} />
221221
```
222222

223+
Alternatively, you can destructure and split custom props from intrinsic props:
224+
225+
```ts
226+
import { ComponentProps } from 'react';
227+
import styled from '@emotion/styled';
228+
import { css } from '@emotion/react';
229+
230+
type InputWrapperProps = ComponentProps<'div'> & { disabled?: boolean };
231+
232+
const InputWrapper = styled(
233+
({ disabled, ...rest }: InputWrapperProps) => <div role="group" {...rest} />
234+
)`
235+
${({ disabled }) => css`
236+
input {
237+
background: ${disabled ? 'red' : 'white'};
238+
}
239+
`}
240+
`;
241+
```
242+
223243
### Passing props when styling a React component
224244
225245
```tsx

0 commit comments

Comments
 (0)