Rebass: No global styles applied with Provider

Created on 19 Jul 2017 · 5Comments · Source: rebassjs/rebass

In the docs you say …

The component is a wrapper around styled-components' ThemeProvider. It also provides global styles that remove the body tag's margin, sets all elements to box-sizing: border-box, and sets a default font-family value based on theme.font.

However looking at the code for Provider and testing it these styles are not applied. Is this something you are still working on or am I missing something.

Source

ferdinandsalis

Most helpful comment

@ferdinandsalis as for CSS resets, they tend to cause more harm than the help they're intended to provide, you certainly should not use them in your own applications, and Rebass should not be opinionated in that way at all. Others have written on the topic before, and I'd prefer not to get too far into that here

jxnblk on 21 Jul 2017

👍3

All 5 comments

Thanks! Yes, I believe this is an oversight on my part, as it used injectGlobal at one point in the prototype, but I removed it. Opening this up for discussion, because generally I hate resets, but having * { box-sizing: border-box } body { margin: 0 } is generally useful to me

jxnblk on 20 Jul 2017

To be honest its easy enough to add these styles yourself when you need them. I just expected it since it is mentioned in the docs.

I am interested as to why you do not like resets …

ferdinandsalis on 20 Jul 2017

On one hand, it is easy to put whatever brew of ‘normalizing‘ declarations you like in a <style> in <head> so having them within Rebass is not necessarily necessary. On the other hand, it is almost a requirement to have box-sizing:border-box to align your layouts.