Overriding styles

When using a component built with Styletron Themer, you have several ways to override its styles.

Using props

This goes without saying: if the component offers props as a way to control its design, use them! The props will typically be tightly optimized inside the dynamicStyle function. A component might offer a size prop that changes multiple style attributes at once: font size, padding, border, etc.

Using inline styles

Styletron Themer overloads React's own style prop, giving you the option of passing in a Styletron object. If you pass in an object, it will be incorporated into construction of Styletron classes, rather than being passed through to the element as inline styles.

This applies only to components that use the <Styled> component.

const element = <Component style={{border: '1px solid green'}} />;

/*
  will render something like this. note the lack of any
  inline "style" attribute.

     <div class="a b c d e">...</div>
*/

Using a nested ThemeProvider

ThemeProvider components can be nested. This allows you to build a theme for your application, then override certain parts of the theme to create a sidebar or footer area in your application.

You can use ThemeProvider components liberally. If you need to make changes to a handful of components, feel free to add new ThemeProviders as needed.

See the multiple themes example.

Using a local component theme

There are times when using the inline style prop is insufficient. What if you need to override the component meta? For example, let's say your component has important styling constants in the meta, and these constants are used inside its dynamicStyle function. (You can see this in action on the Button sample.)

You can't override the component meta by using an inline style. Instead, you need to install a new theme. This can be done with a nested ThemeProvider component. But it can also be done with the localTheme prop on any component built with Styletron Themer. Note that this only overrides the theme for a single component, not the full subtree.

const localTheme = {
  padding: '8px',    // override the basic component theme
  meta: {
    outline: {
      backgroundColor: '#ddd'   // override a value inside the meta
    }
  }
};

const b = <Button localTheme={localTheme}>Click me!</Button>;

The local theme is applied after any themes installed with ThemeProvider components, as shown on the theme cascade page.