ThemeProvider | Mineral UI

ThemeProvider provides a theme to the tree of components contained within. See the theming page for more information.

Examples #

Import Syntax #

import { ThemeProvider } from 'mineral-ui/themes';

Using Mineral UI Styles #

Wrap components in a ThemeProvider to apply the theme to that section of the component tree. That theme will be shallowly merged with the parent theme.

Sample

<DemoLayout>
  <ThemeProvider theme={{ color: 'tomato' }}>
    <Sample />
  </ThemeProvider>
</DemoLayout>

API & Theme #

ThemeProvider Props #

The ThemeProvider component takes the following React props.

Name	Type	Default	Description
children	React$Node		Components to which the theme will be applied
theme	Object \| (Object) => Object	mineralTheme	A shallow object of theme variables and their values or a function that provides such an object.

Undocumented properties, including as and css, will be applied to the root element.

Usage #

When/How to Use #

Wrap your app in a ThemeProvider in order for styles to be properly applied. Additionally, it can be nested deeper in your component hierarchy to theme portions of your app.

Best Practices #

Try to keep global theme overrides all in one place, as they will be easier to change later.

const myTheme = createTheme({
  overrides: {
    color_required: 'rebeccapurple'
  }
});

<ThemeProvider theme={myTheme}>
  <App />
</ThemeProvider>

Use additional ThemeProviders to style different sections. You might want to style different portions of your app with separate themes to create a visual separation.

<ThemeProvider>
  <ThemeProvider theme={{
    color: 'darkgray'
  }}>
    <nav>Navigation<nav>
  </ThemeProvider>
  <main>The main part of your app</main>
</ThemeProvider>

Don't override themes unless you really need to. Try to use the default Mineral UI theme as-is. We've designed the colors, typography and layout as a system to provide turn-key consistency for your app.

<ThemeProvider theme={{ color: '#f00' }}>
  <div>Awesome custom app</div>
</ThemeProvider>