Global styles

A convenient way to add global styles while keeping access to Hope UI styling features.

Import

tsx
import { createGlobalStyles } from "@hope-ui/core";

tsx
import { createGlobalStyles } from "@hope-ui/core";

Usage

The createGlobalStyles function returns another function, which you must call in your app.

jsx
const useGlobalStyles = createGlobalStyles({
  "*": {
    margin: 0,
    padding: 0,
  },
});
function Demo() {
  useGlobalStyles();
  return <App />;
}

jsx
const useGlobalStyles = createGlobalStyles({
  "*": {
    margin: 0,
    padding: 0,
  },
});
function Demo() {
  useGlobalStyles();
  return <App />;
}

Using Hope UI styling features

Like style props and sx, createGlobalStyles supports all Hope UI styling features like theme tokens, shorthand properties, responsive syntax, etc.

jsx
const useGlobalStyles = createGlobalStyles({
  a: {
    color: "primary.500",
    _hover: {
      color: "primary.600",
    },
  },
  ".container": {
    maxW: [640, 768, 1024],
  },
});

jsx
const useGlobalStyles = createGlobalStyles({
  a: {
    color: "primary.500",
    _hover: {
      color: "primary.600",
    },
  },
  ".container": {
    maxW: [640, 768, 1024],
  },
});

Accessing the theme object

createGlobalStyles can accept a function as parameter, which gives you access to the current theme.

jsx
const useGlobalStyles = createGlobalStyles(theme => ({
  body: {
    color: theme.vars.colors.neutral["800"],
  },
}));
function Demo() {
  useGlobalStyles();
  return <App />;
}

jsx
const useGlobalStyles = createGlobalStyles(theme => ({
  body: {
    color: theme.vars.colors.neutral["800"],
  },
}));
function Demo() {
  useGlobalStyles();
  return <App />;
}