Leave Yamada UI a star

Star
Yamada UIYamada UIv1.4.7

Global Styles

Global Style is a component that reflects the style defined in the theme's styles.globalStyle.

The actual defined values are as follows.

global-style.ts

export const globalStyle: UIStyle = {
  body: {
    fontFamily: "body",
    bg: ["white", "black"],
    color: ["black", "white"],
    transitionProperty: "background-color",
    transitionDuration: "normal",
    lineHeight: "base",
    overflowX: "hidden",
  },
  "*::placeholder": {
    color: "gray.500",
  },
  _dark: {
    "*::placeholder": {
      color: "whiteAlpha.400",
    },
  },
  "*, *::before, &::after": {
    borderWidth: "0",
    borderStyle: "solid",
    borderColor: "border",
    wordWrap: "break-word",
  },
}
Copied!

Customize Global Styles

You can customize global styles simply by changing the styles.globalStyle of the theme.

styles.globalStyle can define a style object or a function that returns a style object.

import { UIProvider, extendTheme, UIStyle } from "@yamada-ui/react"


const globalStyle: UIStyle = {
  body: {
    bg: "red.600",
    color: "white",
  },
}


const customTheme = extendTheme({ styles: { globalStyle } })()


const App = () => {
  return (
    <UIProvider theme={customTheme}>
      <YourApplication />
    </UIProvider>
  )
}
Copied!

In the case of a function, you can get theme and colorMode.

import { UIProvider, extendTheme, UIStyle } from "@yamada-ui/react"


const globalStyle: UIStyle = ({ theme, colorMode }) => ({
  body: {
    bg: "red.600",
    color: "white",
  },
})


const customTheme = extendTheme({ styles: { globalStyle } })()


const App = () => {
  return (
    <UIProvider theme={customTheme}>
      <YourApplication />
    </UIProvider>
  )
}
Copied!

Adding Global Styles

If you have chosen Individually or Minimal during installation and installed @yamada-ui/core, the global style components are not being called.

If you want to use global styles, you need to do the following three things:

  1. Add ThemeProvider to the root of your application.
  2. Add GlobalStyle.
  3. Define global styles and pass them to theme of ThemeProvider.
import { ThemeProvider, GlobalStyle } from "@yamada-ui/core"


const globalStyle: UIStyle = {
  body: {
    bg: ["white", "black"],
    color: ["black", "white"],
  },
}


const App = () => {
  return (
    <ThemeProvider theme={{ styles: { globalStyle } }}>
      <GlobalStyle />


      <YourApplication />
    </ThemeProvider>
  )
}
Copied!

If you want to use the global styles of the Default Theme, install @yamada-ui/theme and pass defaultTheme or baseTheme to ThemeProvider.

pnpm add @yamada-ui/theme
Copied!
import { ThemeProvider, GlobalStyle } from "@yamada-ui/core"
import { defaultTheme, baseTheme } from "@yamada-ui/theme"


const App = () => {
  return (
    // `defaultTheme` or `baseTheme`
    <ThemeProvider theme={baseTheme}>
      <GlobalStyle />


      <YourApplication />
    </ThemeProvider>
  )
}
Copied!

Edit this page on GitHub

PreviousuiNextReset Styles