Props Passing

Prop passing allows you to pass properties to your styled component directly from the style configuration, also known as the component theme. This is very similar to defaultProps but with some added flair.
Unlike defaultProps that apply by default, when you pass props through the 'props' key, these props get passed to the component at render time based on the condition specified. This is particularly handy when you want to conditionally pass props to a component.For instance, you could use prop passing to modify a component's properties based on the screen size.

Example

const StyledComponent = styled(
TextInput,
{
p:"$3",
bg: "$coolGray50",
props:{
placeholderTextColor:"$coolGray500"
}
":focus": {
bg: "$coolGray100",
props:{
placeholderTextColor:"$coolGray700"
}
},
},
);
Caution: Utilizing the Passing Props feature within Media Queries is not supported.
Edit this page on GitHub