Removing props from HTML elements

Due to the nature of the popular styled higher order component, as an author you must rely on the CSS-in-JS library you're using to decide whether or not to forward props along to the HTML element. For the most part, these libraries do a good job of not forwarding props that aren't valid HTML attributes. However, the Styled System API uses a few prop names that are either deprecated HTML attributes or SVG attributes and aren't intended to be rendered in the output HTML. While most browsers should handle these stray HTML attributes with no problem, there might be good reason to clean these up in production.

Emotion (Currently missing the should forward prop)

Emotion has first-class support in its API for determining which props are forwarded to the HTML element with its shouldForwardProp (opens in a new tab) API. Styled System has a optional utility that can be passed directly to this API.

In your styled component definition, pass this utility function as an option to the styled HOC.

import styled from '@emotion/styled'
import { space, color, shouldForwardProp } from '@techstack/styled-system'
 
const Box = styled('div', {
  shouldForwardProp,
})(space, color)

Styled Components

It is now possible to remove the props using styled-components v6 (beta)

  import isPropValid from '@emotion/is-prop-valid';
 
  const Providers = () => {
    return (
      <StyleSheetManager shouldForwardProp={isPropValid}>
        {...etc}
      </StyleSheetManager>
    )
  }

css Prop

If you're a fan of using the css prop (opens in a new tab), you can easily control which props are forwarded to the HTML element, just like in any other React component. It might be a little more work up front, but can be useful in some cases.

// example using Emotion's css prop
import React from 'react'
import { color } from '@techstack/styled-system'
 
export default ({ color, bg, ...props }) => (
  <div {...props} css={theme => color({ theme, color, bg })} />
)
Default ValuesSpacing