Styled Components✏️ Edit this page
Styling elements and components
styled is very similar to
css except you call it with an html tag or React component and then call that with a template literal for string styles or a regular function call for object styles.
Changing based on props
Any interpolations or arguments that are functions in
styled are called with
props, this allows you to change the styles of a component based on the props.
Styling any component
styled can style any component as long as it accepts a
Change the rendered tag using
Sometimes you want to create some styles with one component but then use those styles again with another component, the
withComponent method can be used for this. This was inspired by styled-components'
Targeting another emotion component
Component selectors can also be used with object styles.
This API was inspired by glamorous. ❤️
Customizing prop forwarding
By default, Emotion passes all props (except for
theme) to custom components and only props that are valid html attributes for string tags. You can customize this by passing a custom
shouldForwardProp function. You can also use
@emotion/is-prop-valid (which is used by emotion internally) to filter out props that are not valid as html attributes.
Composing dynamic styles
You can create dynamic styles that are based on props and use them in styles.
To use styles from a styled component but change the element that's rendered, you can use the
This API was inspired by styled-components. ❤️
as prop is only used by styled when it's not forwarded to the underlying element. By default, this means that the
as prop is used for html tags and forwarded for components. To change this, you can pass a custom
shouldForwardProp which returns
'as' to forward it or returns
'as' to use it and not forward it.
We can nest selectors using