Using rebass to create a styled component with theme

[cyrilchapon]

There are times when using a simple Box as='anything' is not enough.

I'm using rebass with straight emotion-theming; and I'm trying to make a styled (with theme interpolated values; responsive and everything) Font-awesome Icon.

I just don't get why, but this just doesn't work (I'm loosing the font awesome icon prop for some reason)

<Box as={FontAwesomeIcon} />

So I started to wonder : What if I want to take a custom component; make it pass through rebass / styled-system; and just use any sx or shorthand-properties on it ?

I digged into the Rebass source code and found this (how Box is constructed).

I think a quickwin would be to simply expose that function as an HoC (filled with styled-system sensible defaults props just like Box). Basically; making the div part dynamic in the expression styled('div').

What do you think ?

EDIT: to be clear;

• I know I can just

  import styled from 'emotion-theming'
  const MyAwesomeIcon = styled(FontAwesomeIcon)`
  ${({ theme }) => /*anything you want */}
  `

• I also know that I can digg into styled-system compose and stuff and basically redo what rebass done for Box

But though I think it's a pity to install some sort of abstraction layer in front of more "low-level" APIs (like styled-system and emotion, for rebass); but to be forced to digg into some code and re-do it for; at the end of the day, not using rebass at-all for a particular component.

[dsacramone]

How did you end up solving this?