File tree Expand file tree Collapse file tree 1 file changed +20
-0
lines changed Expand file tree Collapse file tree 1 file changed +20
-0
lines changed Original file line number Diff line number Diff 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
You can’t perform that action at this time.
0 commit comments