CSS Reset 样式重置 #

什么是 CSS Reset？ #

CSS Reset 是一组 CSS 规则，用于消除浏览器之间的默认样式差异。Chakra UI 内置了 CSS Reset，确保你的应用在所有浏览器中具有一致的外观。

为什么需要 CSS Reset？ #

不同浏览器对 HTML 元素有不同的默认样式：

text

┌─────────────────────────────────────┐
│         浏览器默认样式差异            │
├─────────────────────────────────────┤
│  • Chrome 的 body margin: 8px       │
│  • Firefox 的 h1 margin 不同         │
│  • Safari 的 button 样式不同         │
│  • 各浏览器表单元素样式各异           │
└─────────────────────────────────────┘

启用 CSS Reset #

Chakra UI 默认启用了 CSS Reset。你只需要确保正确使用 ChakraProvider：

jsx

import { ChakraProvider, CSSReset } from '@chakra-ui/react'

function App() {
  return (
    <ChakraProvider>
      <CSSReset />
      <App />
    </ChakraProvider>
  )
}

Chakra UI v2 默认包含 #

在 Chakra UI v2 中，CSS Reset 默认已包含在 ChakraProvider 中，无需手动添加：

jsx

import { ChakraProvider } from '@chakra-ui/react'

function App() {
  return (
    <ChakraProvider>
      <App />
    </ChakraProvider>
  )
}

CSS Reset 的作用 #

1. 重置边距和内边距 #

css

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. 统一标题样式 #

css

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

3. 重置列表样式 #

css

ul, ol {
  list-style: none;
}

4. 统一图片样式 #

css

img, video {
  max-width: 100%;
  height: auto;
}

5. 表单元素重置 #

css

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

自定义 CSS Reset #

扩展默认 Reset #

jsx

import { ChakraProvider, extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  styles: {
    global: {
      body: {
        bg: 'gray.50',
        color: 'gray.800',
      },
      '*': {
        borderColor: 'gray.200',
      },
      'h1, h2, h3, h4, h5, h6': {
        fontWeight: 'bold',
      },
      a: {
        color: 'blue.500',
        _hover: {
          textDecoration: 'underline',
        },
      },
    },
  },
})

function App() {
  return (
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  )
}

完整的全局样式配置 #

jsx

import { extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  styles: {
    global: (props) => ({
      body: {
        bg: props.colorMode === 'dark' ? 'gray.900' : 'white',
        color: props.colorMode === 'dark' ? 'white' : 'gray.800',
      },
      'html, body': {
        height: '100%',
      },
      '#root': {
        height: '100%',
      },
      '*': {
        borderColor: props.colorMode === 'dark' ? 'gray.700' : 'gray.200',
      },
      'a, button': {
        cursor: 'pointer',
      },
      'h1, h2, h3, h4, h5, h6': {
        fontWeight: 'bold',
        lineHeight: 'shorter',
      },
      'p, li': {
        lineHeight: 'tall',
      },
      code: {
        bg: props.colorMode === 'dark' ? 'gray.800' : 'gray.100',
        px: 2,
        py: 1,
        borderRadius: 'md',
        fontSize: 'sm',
      },
      pre: {
        bg: props.colorMode === 'dark' ? 'gray.800' : 'gray.100',
        p: 4,
        borderRadius: 'lg',
        overflow: 'auto',
      },
    }),
  },
})

export default theme

常见重置项 #

文本元素 #

jsx

const theme = extendTheme({
  styles: {
    global: {
      'h1': {
        fontSize: '2xl',
        fontWeight: 'bold',
        mb: 4,
      },
      'h2': {
        fontSize: 'xl',
        fontWeight: 'bold',
        mb: 3,
      },
      'p': {
        mb: 4,
        lineHeight: 'tall',
      },
      'blockquote': {
        borderLeft: '4px solid',
        borderColor: 'gray.200',
        pl: 4,
        fontStyle: 'italic',
      },
    },
  },
})

链接样式 #

jsx

const theme = extendTheme({
  styles: {
    global: {
      'a': {
        color: 'blue.500',
        textDecoration: 'none',
        transition: 'color 0.2s',
        _hover: {
          color: 'blue.600',
          textDecoration: 'underline',
        },
        _focus: {
          outline: 'none',
          ring: '2px',
          ringColor: 'blue.500',
        },
      },
    },
  },
})

表单元素 #

jsx

const theme = extendTheme({
  styles: {
    global: {
      'input, textarea, select': {
        borderColor: 'gray.300',
        borderRadius: 'md',
        _focus: {
          borderColor: 'blue.500',
          outline: 'none',
        },
      },
      'button': {
        cursor: 'pointer',
        _focus: {
          outline: 'none',
        },
      },
    },
  },
})

列表样式 #

jsx

const theme = extendTheme({
  styles: {
    global: {
      'ul, ol': {
        pl: 6,
        mb: 4,
      },
      'li': {
        mb: 2,
      },
      'ul li': {
        listStyleType: 'disc',
      },
      'ol li': {
        listStyleType: 'decimal',
      },
    },
  },
})

禁用 CSS Reset #

如果需要禁用 CSS Reset，可以设置 resetCSS 为 false：

jsx

import { ChakraProvider } from '@chakra-ui/react'

function App() {
  return (
    <ChakraProvider resetCSS={false}>
      <App />
    </ChakraProvider>
  )
}

与其他 Reset 库对比 #

Normalize.css #

jsx

import { ChakraProvider } from '@chakra-ui/react'
import 'normalize.css'

function App() {
  return (
    <ChakraProvider resetCSS={false}>
      <App />
    </ChakraProvider>
  )
}

Tailwind Preflight #

jsx

import { ChakraProvider } from '@chakra-ui/react'
import 'tailwindcss/base.css'

function App() {
  return (
    <ChakraProvider resetCSS={false}>
      <App />
    </ChakraProvider>
  )
}

实用全局样式示例 #

滚动条样式 #

jsx

const theme = extendTheme({
  styles: {
    global: {
      '::-webkit-scrollbar': {
        width: '8px',
        height: '8px',
      },
      '::-webkit-scrollbar-track': {
        bg: 'gray.100',
      },
      '::-webkit-scrollbar-thumb': {
        bg: 'gray.300',
        borderRadius: 'full',
        _hover: {
          bg: 'gray.400',
        },
      },
    },
  },
})

选中文本样式 #

jsx

const theme = extendTheme({
  styles: {
    global: {
      '::selection': {
        bg: 'blue.500',
        color: 'white',
      },
    },
  },
})

打印样式 #

jsx

const theme = extendTheme({
  styles: {
    global: {
      '@media print': {
        body: {
          bg: 'white',
          color: 'black',
        },
        'nav, footer, aside': {
          display: 'none',
        },
      },
    },
  },
})

CSS Reset 对比表 #

特性	Chakra Reset	Normalize.css	Reset CSS
边距重置	✓	部分保留	✓
表单重置	✓	✓	✓
无障碍保留	✓	✓	✗
大小	小	中	小
可定制性	高	中	低

最佳实践 #

1. 保持一致性 #

jsx

const theme = extendTheme({
  styles: {
    global: {
      body: {
        fontFamily: 'body',
        lineHeight: 'base',
      },
    },
  },
})

2. 响应式全局样式 #

jsx

const theme = extendTheme({
  styles: {
    global: {
      html: {
        fontSize: {
          base: '14px',
          md: '16px',
          lg: '18px',
        },
      },
    },
  },
})

3. 暗色模式支持 #

jsx

const theme = extendTheme({
  styles: {
    global: (props) => ({
      body: {
        bg: props.colorMode === 'dark' ? 'gray.900' : 'white',
        color: props.colorMode === 'dark' ? 'white' : 'gray.800',
      },
    }),
  },
})

下一步 #

现在你已经了解了 CSS Reset，接下来学习布局组件，开始使用 Chakra UI 构建页面布局！