To help stay within Looker's design principles, we publish a theme object, along with libraries, like Styled Components and styled-system, to easily access the theme object within components. For example, when styling components using the
styled function, the theme object becomes part of a component's props:
Looker Components require that a Styled Components
ThemeProvider be available and that theme specified have the same structure that is provided by Looker Component's stock
ComponentsProvider is provided out-of-the-box to handle all of this.
See below for information on extending the stock theme for your own use case.
NOTE: For the sake of brevity examples within the documentation generally don't show the
ComponentsProvider. It's injected as part of the site's code sandbox setup.
You can use the theme's properties within your custom components:
Extending the Theme
You can extend the theme provided by Looker Components by creating a copy and then providing that version of theme to the ThemeProvider.
Nesting ComponentsProvider (ThemeProviders)
ComponentsProvider as a Styled Components' ThemeProvider acts as a React Context and in so doing is able to support the standard behavior of nested contexts - the theme defined nearest to the component will be the version used.
NOTE: You'll also see that
PrettyButton in the example simply falls back to
Button's default style when
myCustomAttribute isn't assigned.