Configuration

1. StyledSystemProvider declaration

StyledSystemProvider is a React.Provider that accepts a custom theme similar to the ThemeProvider of other design packages as an argument and allows you to retrieve values from components or hooks within the app.

App.tsx

<App>
  <StyledSystemProvider theme={theme}>
     {...others}
  </StyledSystemProvider>
</App>

The theme passed as an argument is described in the next paragraph.

warning

If you try to use a theme in a Render Context where StyledSystemProvider does not exist, an error will not occur, but the style may not be applied properly.

2. Creating a custom ThemedDict object

ThemedDict is a set of design token values that you need to pass to your theme.

These include space, sizes, colors, etc.

Since a module that default exports ThemedDict is needed in the Type Generation process using CLI in the future, it is recommended to define it as follows.

Theme.ts

const unit = 4;
const spacing = {
  0: 0 * unit, // 0px
  px: 1, // 1px
  0.5: 0.5 * unit, // 2px
  1: 1 * unit, // 4px
  2: 2 * unit, // 8px
  3: 3 * unit, // 12px
  /* ... */
} as const;

const AppTheme = {
  colors: {
    white: '#FFFFFF',
    black: '#000000',
    transparent: '#FFFFFF00',
    gray50: '#F9FAFB',
    gray100: '#F3F4F6',
    gray200: '#E5E7EB',
    /* ... */
  },
  space: { ...spacing, sidePadding: 0 /* injected from outer */ },
  sizes: { ...spacing, sidePadding: 0 /* injected from outer */ },
  radii: { sm: 4, md: 8, ... },
  typography: {
    title: { fontSize: 18, textAlign: 'center', /* ... */ }
  }
}

export default AppTheme;

info

In fact, this ThemedDict object is used as a value passed to StyledSystemProvider, but since Type Generation using CLI creates a type based on this object, it exists to ensure that values injected later exist in the created type.

For values among the keys that are not immediately known, you can put any value in them and inject them later.

3. Passing ThemedDict object to StyledSystemProvider

App.tsx

import theme from './AppTheme'

...

const sidePadding = useResponsiveSidePadding();

<App>
  <StyledSystemProvider theme={{ ...theme, space: { ...theme.space, sidePadding }, sizes: { ...theme.sizes, sidePadding } }}>
     {...others}
  </StyledSystemProvider>
</App>