3. Theme

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 theme object.

The 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.