UseStyletron

Base Web exports a modified version of Styletron's useStyletron function. It is a lightweight approach to generating CSS classes for an element or component, without having to opt in to Styletron's styled component API. This allows you to style any element directly while still taking advantage of Styletron's efficient CSS generation. See styletron's documentation for more information about how this is used.

Examples

This modified version has access to theme variables:

Since Styletron is already in your application and you'll probably need to create new components anyway, we recommend you to use this useStyletron hook! 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 isolation.

In the example above, take a look at how css definitions are re-used by multiple elements. Consider how this can be further extended with your own custom hooks.

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:

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>
);
}