Transient props in Styled Components
Aug 26 2020Styled Components
Today I learned about transient props in Styled Components.
What issue it resolves?
When creating a styled component with a prop which is similar to an existing HTML attribute, that prop gets passed through to the underlying DOM element as a corresponding attribute. We could handle it by renaming that prop to not match any existing HTML attribute.
This new props now enables us to pass the same props with
$ prefixed to them, and styled components will know not to pass these to the rendered DOM element nor pass it further down the component hierarchy.