Global Styles

Add global styles from your theme.

Use the styles.global key in your theme to set theme-aware styles for any elements.

By default, the ThemeProvider will apply styles in styles.global globally and styles.root to the <body> element.

theme.js
export default {
  ...
  styles: {
    // Applies globally.
    global: {
      a: {
        cursor: "pointer",
      }
    },
    // Applies to the `body` element.
    root: {
      m: 0,
      p: 0,
    }
  }
  ...
}

Pseudo Selectors Color Modes