Reset Styles

Reset styles are components that reflect the styles defined in the theme's styles.resetStyle.

The reset style component is included within the UIProvider.

reset-style.ts

export const resetStyle: UIStyle = {
  "*": {
    boxSizing: "border-box",
  },

  "::before, ::after": {
    boxSizing: "inherit",
  },

  html: {
    lineHeight: 1.15,
    WebkitTextSizeAdjust: "100%",
    WebkitTapHighlightColor: "transparent",
  },

  body: {
    margin: 0,
  },

  main: {
    display: "block",
  },

  "p, table, blockquote, address, pre, iframe, form, figure, dl": {
    margin: 0,
  },

  "h1, h2, h3, h4, h5, h6": {
    fontSize: "inherit",
    lineHeight: "inherit",
    fontWeight: "inherit",
    margin: 0,
  },

  "ul, ol": {
    margin: 0,
    padding: 0,
    listStyle: "none",
  },

  dt: {
    fontWeight: "bold",
  },

  dd: {
    marginLeft: 0,
  },

  hr: {
    boxSizing: "content-box",
    height: 0,
    overflow: "visible",
    border: 0,
    borderTop: "1px solid",
    margin: 0,
    clear: "both",
    color: "inherit",
  },

  pre: {
    fontFamily: "monospace, monospace",
    fontSize: "inherit",
  },

  address: {
    fontStyle: "inherit",
  },

  a: {
    backgroundColor: "transparent",
    textDecoration: "none",
    color: "inherit",
  },

  "abbr[title]": {
    borderBottom: "none",
    textDecoration: "underline dotted",
  },

  "b, strong": {
    fontWeight: "bolder",
  },

  "code, kbd, samp": {
    fontFamily: "monospace, monospace",
    fontSize: "inherit",
  },

  small: {
    fontSize: "80%",
  },

  "sub, sup": {
    fontSize: "75%",
    lineHeight: 0,
    position: "relative",
    verticalAlign: "baseline",
  },

  sub: {
    bottom: "-0.25em",
  },

  sup: {
    top: "-0.5em",
  },

  img: {
    borderStyle: "none",
    verticalAlign: "bottom",
  },

  "embed, object, iframe": {
    border: 0,
    verticalAlign: "bottom",
  },

  "button, input, optgroup, select, textarea": {
    WebkitAppearance: "none",
    appearance: "none",
    verticalAlign: "middle",
    color: "inherit",
    font: "inherit",
    border: 0,
    background: "transparent",
    padding: 0,
    margin: 0,
    outline: 0,
    borderRadius: 0,
    textAlign: "inherit",
  },

  "[type='checkbox']": {
    WebkitAppearance: "checkbox",
    appearance: "checkbox",
  },

  "[type='radio']": {
    WebkitAppearance: "radio",
    appearance: "radio",
  },

  "button, input": {
    overflow: "visible",
  },

  "button, select": {
    textTransform: "none",
  },

  "button, [type='button'], [type='reset'], [type='submit']": {
    cursor: "pointer",
    WebkitAppearance: "none",
    appearance: "none",
  },

  "button[disabled], [type='button'][disabled], [type='reset'][disabled], [type='submit'][disabled]":
    {
      cursor: "default",
    },

  "button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner":
    {
      borderStyle: "none",
      padding: 0,
    },

  "button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring":
    {
      outline: "1px dotted ButtonText",
    },

  "select::-ms-expand": {
    display: "none",
  },

  option: {
    padding: 0,
  },

  fieldset: {
    margin: 0,
    padding: 0,
    border: 0,
    minWidth: 0,
  },

  legend: {
    color: "inherit",
    display: "table",
    maxWidth: "100%",
    padding: 0,
    whiteSpace: "normal",
  },

  progress: {
    verticalAlign: "baseline",
  },

  textarea: {
    overflow: "auto",
  },

  "[type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button":
    {
      display: "none",
    },

  "[type='search']": {
    outlineOffset: "-2px",
  },

  "[type='search']::-webkit-search-decoration": {
    WebkitAppearance: "none",
  },

  "[type='time']::-webkit-calendar-picker-indicator": {
    display: "none",
  },

  "::-webkit-file-upload-button": {
    WebkitAppearance: "button",
    font: "inherit",
  },

  "::-webkit-search-cancel-button": {
    WebkitAppearance: "none",
  },

  "label[for]": {
    cursor: "pointer",
  },

  details: {
    display: "block",
  },

  summary: {
    display: "list-item",
  },

  "[contenteditable]": {
    outline: "none",
  },

  table: {
    borderCollapse: "collapse",
    borderSpacing: 0,
  },

  caption: {
    textAlign: "left",
  },

  "td, th": {
    verticalAlign: "top",
    padding: 0,
  },

  th: {
    textAlign: "left",
    fontWeight: "bold",
  },

  template: {
    display: "none",
  },

  "[hidden]": {
    display: "none !important",
  },
}

Copied!

Customizing Reset Styles

You can customize the reset styles by simply changing the styles.resetStyle of the theme.

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

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

const resetStyle: UIStyle = {
  th: {
    textAlign: "center",
    fontWeight: "semibold",
  },
}

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

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 resetStyle: UIStyle = ({ theme, colorMode }) => ({
  th: {
    textAlign: "center",
    fontWeight: "semibold",
  },
})

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

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

Copied!

If you want to learn more about themes, please check Customize Theme and Component Styles.

Adding Reset Styles

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

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

Add ThemeProvider to the root of the application.
Add ResetStyle.
Define the reset style and pass it to ThemeProvider's theme.

import { ThemeProvider, ResetStyle } from "@yamada-ui/core"

const resetStyle: UIStyle = {
  "*": {
    boxSizing: "border-box",
  },
}

const App = () => {
  return (
    <ThemeProvider theme={{ styles: { resetStyle } }}>
      <ResetStyle />

      <YourApplication />
    </ThemeProvider>
  )
}

Copied!

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

pnpm add @yamada-ui/theme

Copied!

import { ThemeProvider, ResetStyle } from "@yamada-ui/core"
import { defaultTheme, baseTheme } from "@yamada-ui/theme"

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

      <YourApplication />
    </ThemeProvider>
  )
}

Copied!

defaultTheme has all tokens defined, including component styles.
baseTheme has tokens such as global styles and colors defined, but does not have component styles defined.

Edit this page on GitHub

PreviousGlobal Styles NextCLI