Classname prop about rebass HOT 7 CLOSED

Hey Andy. That tends to be a common pattern but ultimately breaks style
purity of rebass components. If a user can add any style they want to a
component it's impossible for the component author to be able to change the
component knowing they won't break anything. Wrapping components may seems
like your adding superfluous divs but it's actually making your application
much more robust.
On Sat, Jan 16, 2016 at 04:28 Andy Kay [email protected] wrote:

Would it not be nice to be able to pass down classNames on components so
you don't have to wrap the components with another block just to put a
className on it?

For example:

instead of:

I would be willing to submit a PR to address this if this is a legitimate
issue and not just how you explicitly designed the components

Thanks!

Andy

—
Reply to this email directly or view it on GitHub
#30.

from rebass.

Thanks that makes sense. However, say I wanted to give the Toolbar component a white background how would I go about doing that without overriding the css?

from rebass.

You can pass color: "white" in as a prop: https://github.com/jxnblk/rebass/blob/master/src/Toolbar.jsx#L19

from rebass.

Sorry one last question: won't the text color still be white though?
https://github.com/jxnblk/rebass/blob/master/src/Toolbar.jsx#L18

Causing a white text on white background?

from rebass.

Yep. I'd either create a PR to customize the bg-color and the text color independently or create your own toolbar component seeing as it's so simple :)

from rebass.

Ok thanks for your help Chris!

from rebass.

I generally agree with @chrislloyd on this one. Passing className as props breaks the encapsulation of styles in the component. That said, future versions of this repo should make the components more flexible, especially in regards to colors and theming.

from rebass.