Styled

import {styled} from 'baseui';

Base Web exports a modified version of Styletron's styled function. This modified version has access to theme variables:

Styled reading from Theme values

This is a blue div

Since Styletron is already in your application and you'll probably need to create new components anyway, we recommend you to use this styled function! Do you prefer other approaches when styling your components? Feel free to use them in parallel to Base Web and Styletron. Styletron adds only 8kB to your bundle and works in an isolation.

If you are interested more into how this modified styled function is created, check the Styletron's theme documentation.

Additional State Props

When you use overrides, you also get an access to additional component states, like $disabled or $error, depending on the given component:

Styled overriding subcomponents

To understand overrides better, go here.