Utility Functions


⚠️ This is a web-only utility function
createGlobalStylesWeb is a utility function It takes a style object with aliases and tokens, resolves it, and returns a function. When invoked, this function injects the given style into global CSS.

How to use:

createGlobalStylesWeb returns a callback function When this function is passed to the globalStyleInjector property of StyledProvider, it takes a configuration object and injects the styles globally inside a style tag with the ID 'global-styles'. This function supports class names, IDs, and all other CSS functionalities.


const addGlobalCss = createGlobalStylesWeb({
"*": { margin: 0, padding: 0 },
;<StyledProvider globalStyleInjector={addGlobalCss}>
<App />
⚠️ The style object inside createGlobalStylesWeb only supports token resolution. It doesn't support state or color mode-specific properties, i.e., writing :hover: {bg:”$red400”} would not work.


  • To see the changes, you need to perform a hard refresh of the page, as hot reloading will not work.
  • If your component has a local propertyTokenMap or any component-specific configuration, these will not extend to the styles of that component.