This component provides a basic set of styles to enable Looker Components. While not strictly required, failing to import this component will degrade the appearance of some components.
GlobalStyle will apply style broadly and may have impacts on other content. In the future we will provide a way to scope the GlobalStyle to only apply to HTML output by
@looker/components but for the time-being the assumption is that the CSS applied is narrow in it's behavior and should have limited side-effects.
ComponentsProvider will automatically load the
GlobalStyle component for you.
It's composed of two primary pieces:
The GlobalStyle component will assign the theme's "brand" font family ('Open Sans' in Looker's default theme) broadly across all components except a few that explicitly specify something different (
<Code> for example leverages what's specified in theme.font.code)
- Apply CSS'
box-sizing: border-boxto all elements
- Sets base font-size to 16px (true for all modern browsers but helps establish a consistent baseline)
- Broadly resets basic element styles so that cross-browser styling is consistent.