Rebass: Rebass with Radium

[wlingke]

In an effort to be truly CSS-independent, I'm trying to get Radium to work with Rebass - specifically because of pseudo classes like :hover and media queries. Unfortunately, I have not been able to get it to work because both Radium and Rebass use the style prop.

Any suggestions here?

[mrsufgi]

radium or any JSS framework/library would be superawesome

[dmackerman]

Same with Aphrodite as well.

One thing I did discover digging through the source code, is that since Aphrodite uses className, you can use _className={css(buttonStyles.base, isActive && buttonStyles.active)}>.

https://github.com/jxnblk/rebass/blob/master/src/Button.js#L46

[mrsufgi]

Aphroditing the rebass, so awesome!

[dmackerman]

What appears to be a simple solution (at least for the className usecase) is to just append the className prop that gets passed in to every component.

Instead of className='Breadcrumbs', maybe just

className={`Breadcrumbs ${props.className}`}

Or just allow the className to be overridden completely with the standard className prop.

Radium is a little different because it uses style and actually modifies how the style prop works in terms of merging, etc.

[jxnblk]

Glamor and Aphrodite are probably front runners for being used in the library itself. As for the className prop, v0.4 supports passing custom classnames, so they should work there

[dmackerman]

Sounds good @jxnblk. My vote is for Aphrodite. 👍

When do you expect 0.4 to be out?

[steida]

@jxnblk I think https://github.com/rofrischmann/fela is probably the winner. Check it.

[maotora]

@steida Hello, I love the suggestion you gave and read the fela documentation.

I wonder how do you use fela with rebass. Can you maybe offer an example please?

Thanks!

[peterpme]

:wave: I'd be interested in helping move this over to Glamor.

[jxnblk]

And... I ended up using styled-components. Mostly for the community, active development, and extensibility. Thanks all for the discussion! 😎