Rebass: Problems styling new Checkbox component

[javiercr]

First of all, thank you for putting together a set of form primitives, this is going to be very helpful :)

I've been testing them out and so far I've had problems to style the Checkbox component. According to the form docs, it should be possible to style them with theme.forms.checkbox, but I've tried with all kind of properties (color, background borderColor) and none seems to work.

The only way I've found to change the color is to use the sx property:

import { Checkbox } from "@rebass/forms";

<Checkbox sx={{ color: "#00f"}}/>

However for some reason that's only accepting raw values, and not colors defined in theme.colors (such as primary).

Not sure if there is something broken in the implementation of the Checkbox component, or it's just lack of better documentation for it, in any case any guidance would be more than appreciated :)

Thank you!

[jxnblk]

Thanks! It sounds like maybe the theming context isn't coming through. Can you check to see if you have multiple versions of @emotion/core installed in your app using npm ls or yarn list?

[javiercr]

@jxnblk actually I'm using styled-components, bug I got @emotion/core v10.0.14 installed as a dependency of reflexbox. The same dependency appears a few times but always with that version and flagged as "deduped", so I don't see anything weird there.

[jxnblk]

Aha! The @rebass/forms package only supports Emotion at the moment, so I'm guessing you're not using the Emotion ThemeProvider, and it's not picking up the theme context at all

[javiercr]

Yep, that's it, for the time being I'm just wrapping @rebass/forms with my own components and the withTheme hoc from styled-components.

In any case maybe adding a note about this to either the styled components guide or the forms docs be worth it?

Also, what are the future plans regarding the support of styled-components? At our company we may consider switching to Emotion, as we don't see much of a difference and we like rebass as the foundation for our design system.

[jxnblk]

4.05 should have the styled-components version now, you can import components from @rebass/forms/styled-components

[javiercr]

Great! Now it works :) Thank you!

[ac-coding]

4.05 should have the styled-components version now, you can import components from @rebass/forms/styled-components

Does @rebass/forms/styled-components not exist anymore? I don't use Emotion and use Styled Components instead.

I'm trying to import some forms components but doing it so using @rebass/forms won't take my variant styles, that's why I try to install them from the Styled Components dependency but I get an error Could not install from "@rebass/forms/styled-components" as it does not contain a package.json file. instead...