Leave Yamada UI a star

Star
Yamada UIYamada UIv1.4.2

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