Theme provider
The Theme provider is a wrapper that provides theming values to all of the components it contains.
- As the root component of the Garden DOM, where it provides global context for RTL layout
- As a nested wrapper for a subset of components that require themed styling
How to use it
Default
The typical usage of a theme provided to styled components.
Branding
You can override the default Theme provider for a branded component
experience. In this example, Garden’s
primaryHue is replaced and corners are
set to square.
Extension
The default theme can be extended with custom values. In this example, the
palette adds a new deep orange hue
which replaces Garden’s default
dangerHue.
Nesting
A nested Theme provider can access and modify parent theming values. In this example, nesting is used to override the size, color, and shape of the default styled component.
Targeting
The theme’s components object can override styling for a targeted component type. In this example, Garden Tabs are restyled to appear below associated panel content.
Configuration
- Name8.76.4•View source•View on npm
- Installnpm install @zendeskgarden/react-theming
- Depsnpm install react react-dom styled-components
- Importimport { ThemeProvider } from '@zendeskgarden/react-theming'
API
ThemeProvider
| Prop name | Type | Default | Description |
|---|---|---|---|
focusVisibleRef | RefObject<HTMLElement> | null | – | Provides a reference to the DOM node used to scope a :focus-visible polyfill. If left undefined, a scoping <div> will be rendered. Assigning null (on a nested ThemeProvider, for example) prevents the added polyfill and scoping <div>. |
theme | IGardenTheme | – | Provides values for component styling. See styled-components ThemeProvider for details. |