Avoid global styles to break components

Bug Report

Describe the bug In docz-theme-default some global styles are applied which are reaching components and breaking the styles on some scenarios:

*, *:before, *:after {
    box-sizing: border-box;
  }

All my components will receive box-sizing: border-box;.

These global rules could be easily avoided by using the box-sizing properties on the necessary elements directly.

A clear and concise description of what the bug is. docz-theme-default global styles are leaking to consumer components.

To Reproduce I guess this is self explanatory.

Expected behavior Styles from docz-theme-default should not impact on consumer components.

I can provide a PR for this if maintainers think this is a valid issue.

[jedrichards]

Agreed … since this lib doesn’t make any attempt to isolate styles between the component previews and the outer theme then the very least that should happen is that global styles aren’t used in the theme.

The theme additionally includes normalize.css which can also have a global effect on component styles. It essentially forces you to use normalize.css in your apps too, since otherwise there’s no guarantee components will render consistently in docz vs. your app. It’s a shame because normalize is pretty bloated, and no longer really appropriate as a modern css reset.

Much better to make the theme CSS more robust and isolated, and reset theme elements individually as needed.

[pedronauck]

I removed normalize.css from theme default and the classes and styles applied to Playground are fixed too!