shouldForwardProp example

Text.js

import styled from 'react-emotion'
import { bool } from 'prop-types'
import isPropValid from '@emotion/is-prop-valid'
import {
  fontSize,
  color,
  textAlign,
  fontWeight,
  hover,
  propTypes,
} from 'styled-system'

const block = props => {
  if (props.block) return { display: 'block' }
  return null
}

export const TextProps = {
  ...propTypes.fontSize,
  ...propTypes.color,
  ...propTypes.textAlign,
  ...propTypes.fontWeight,
  ...propTypes.hover,
  block: bool,
}

const Text = styled('span', {
  shouldForwardProp: prop =>
    isPropValid(prop) && ['color', 'fontSize', 'block'].indexOf(prop) === -1,
})(color, fontSize, fontWeight, textAlign, hover, block)

Text.propTypes = TextProps
Text.displayName = 'Text'

export default Text