Theme cascade

Here is how styles are applied when rendering a <Styled> component. In order of increasing priority:

• Default component styles (created in your component)
• User theme (passed to the ThemeProvider component)
• Local theme (passed directly to the component as a localTheme prop; details in overriding styles)
• Styles created in response to props (in your dynamicStyle function)
• Per-component inline styles (e.g., style={{border: '1px solid #aaa'}})

Lastly, after the inline styles are merged into the main component styles, middleware functions are applied. This gives you a last-moment opportunity to use functional techniques on a set of styles.

After middleware, your render callback is invoked with a className prop that contains all applicable Styletron classes.

Non-Styletron classes

You may need to use non-Styletron classes to integrate with legacy or third-party CSS frameworks. If the user of your component includes them, they are inserted first in the class list.

const element = <Component className="callout" />;

/* 
   will render something like this:
      <div class="callout a b c d">...</div>
*/

Because they are output first, they have the lowest priority.

This feature is available to any component you build using Styled.

Using inline styles & themes

Every component built with Styletron themer accepts several props. You don't need to do anything extra to get this functionality:

• style -- Overrides React's own style prop. You can pass a full Styletron object, with media queries, hover states, etc.
• className -- See above.
• localTheme -- Overrides the theme for a single component. This acts much like the inline style prop, but you can use this to override the component meta as well.

More details in overriding styles.