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.
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)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 thediv
part dynamic in the expressionstyled('div')
.What do you think ?
EDIT: to be clear;
compose
and stuff and basically redo what rebass done forBox
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.