Styled System forwarding props (e.g., "width", "font-size") to HTML elements

[scf4]

I'm using styled components. Is this the intended behavior?

Rendered HTML:

<div font-size="14px" font-weight="bold" class="..." />

[jxnblk]

This is an issue with the styled-components library, see https://styled-system.com/guides/removing-props-from-html

[scf4]

Thanks!

[rtymchyk]

This was a blocker for us when using AMP because unrecognized HTML props means your AMP page is invalid.

If you're looking for a solution, I've written an HOC that omits props from being passed down.

export default function omitProps(Component, propsToOmit) {
  function WithoutOmittedProps({ children, ...rest }) {
    return <Component {...omit(rest, propsToOmit)}>{children}</Component>
  }

  WithoutOmittedProps.propTypes = {
    children: PropTypes.node,
  }

  WithoutOmittedProps.displayName = `WithoutOmittedProps(${Component.displayName || Component.name})`

  return WithoutOmittedProps
}

You can then use it like so:

import styled from 'styled-components'
import { space, layout, color } from 'styled-system'
import propTypes from '@styled-system/prop-types'

import omitProps from 'connectors/omit-props'

const propsToOmit = [
  ...Object.keys(propTypes.space),
  ...Object.keys(propTypes.layout),
  ...Object.keys(propTypes.color),
]

const Box = styled(omitProps('div', propsToOmit))`
  ${space}
  ${layout}
  ${color}
`

export default Box