npm i clean-element
Styled-components and other libraries attempt to remove invalid HTML attributes from props using a whitelist, but do not remove width, fontSize, color, or other valid HTML attributes when used as props.
To ensure that style props are not passed on to the underlying DOM element, even in cases where a prop is a valid HTML attribute, like width or align, use the cleanElement higher order component to create a base component that remove props defined in propTypes.
import styled from 'styled-components'import textAlign propTypes from 'styled-system'import cleanElement from 'clean-element'const CleanDiv =// props that are defined as propTypes are removedCleanDivpropTypes =...propTypestextAlignconst Box = ``// <Box align='center' />// `align` prop is picked up by styled-components,// but not passed on to the HTML element
Manually omitting props
As an alternative to using the
cleanElement function, removing style props from styled-components can be done manually, with a more React-like approach.
const Box =``
See this discussion for more information: https://github.com/styled-components/styled-components/issues/439