Skip to main content

Styled Components v5 Update

Rhapsody has been upgraded to styled-components v5. This upgrade brings significant performance improvements for styled-components as well as many DX improvements when writing styled-components.

Changes in v5 include:

  • Significantly faster performance mounting and updating component styles
  • New feature: the as prop allows you to swap out the underlying element in a styled-component, e.g. <StyledLink as={ThirdPartyComponent}>Click me</StyledLink>
  • New feature: Transient props allow you to pass props to the styled-component without passing them to the underlying DOM node, e.g. <StyledInput type="text" $size="large" />
  • createGlobalStyle is used to add global styles instead of injectGlobal. injectGlobal has been removed.
  • Use ref when passing a ref to a styled-component instead of the old innerRef prop. innerRef has been removed.
  • If you use a function with the .attrs syntax, the function needs to be at the top level, not nested at each props. See the .attrs docs for more information.
  • The .extend syntax has been removed. For some time, it has been possible to extend styled-components using styled(SomeComponent) and that is now the only way to do so.

See the styled-components documentation for more information on these changes and other styled-component features.