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.

UseStyletron

An alternative to styled is the useStyletron hook. With useStyletron we introduce a lightweight approach to generating CSS classes for an element or component, without having to opt in to the standard Styletron styled component API. This allows you to style any element or component directly while still taking advantage of Styletron's efficient CSS generation. See styletron's documentation for more information about how this is used. The benefit of using baseui's export is that it provides the theme for convenience. See an example below of how it is used.

UseStyletron hook

This is a blue div

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.

Custom themes and Flow type

The styled and withStyle functions imported from baseui provide flow type support for the default theme shape. However, if you create a custom theme with additional fields, flow will show an error. To help, baseui exports two utility functions createThemedStyled and createThemedWithStyle. These will return their respective functions with a provided theme type. Doing so saves from needing to import the custom theme type around. See below for an example.

import { - styled, - withStyle, - useStyletron, + createThemedStyled, + createThemedWithStyle, + createThemedUseStyletron, } from 'baseui'; type CustomThemeT = {myBlue: string, myRed: string}; // you'll likely want to import these functions from a relative path in your application +const themedStyled = createThemedStyled<CustomThemeT>(); +const themedWithStyle = createThemedWithStyle<CustomThemeT>(); +const themedUseStyletron = createThemedUseStyletron<CustomThemeT>(); type PropsT = { $active: boolean - $theme: CustomThemeT }; -const First = styled<PropsT>('div', props => { +const First = themedStyled<PropsT>('div', props => { return { backgroundColor: props.$active ? props.$theme.colors.myBlue : props.$theme.colors.myRed, }; }); -const Second = withStyle<PropsT>('div', props => { +const Second = themedWithStyle<PropsT>(First, props => { return { color: props.$active ? props.$theme.colors.myBlue : props.$theme.colors.myRed, }; }); const Third = () => { - const [css, theme] = useStyletron(); + const [css, theme] = themedUseStyletron(); return ( - <div className={css({color: theme.colors.primary})}> + <div className={css({color: theme.myBlue)}> test </div> ); }