如何在Chakra-UI主题中按层级设置Heading字体大小？

问题根源 #

你之前尝试的方式没生效，核心原因是没命中Chakra-UI Heading组件的优先级样式入口：

• 全局样式（global）优先级低于组件自带的类/内联样式，会被覆盖
• textStyles需要手动通过textStyle props绑定到组件，不会自动关联h1-h6元素
• baseStyle中的fontSize会被Heading默认的size配置覆盖（默认size对应不同heading层级的字体大小）

正确配置方式 #

Chakra-UI的Heading组件字体大小是通过sizes配置项定义的，你需要在主题中覆盖对应层级的size样式：

1. 配置Heading组件的sizes

在主题文件中，用defineStyleConfig覆盖Heading的默认size配置：

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

// 自定义Heading组件配置
const Heading = defineStyleConfig({
  // 覆盖默认size对应的字体大小（对应不同heading层级）
  sizes: {
    // h1默认对应size="2xl"，修改其响应式字体大小
    '2xl': {
      fontSize: ['3xl', null, '5xl'], // 移动端3xl，桌面端5xl（跳过平板断点）
      fontWeight: 'light', // 保留你之前生效的字体粗细配置
    },
    // h2默认对应size="xl"，按需修改
    xl: {
      fontSize: ['2xl', null, '4xl'],
    },
    // h3默认对应size="lg"，按需修改
    lg: {
      fontSize: ['xl', null, '3xl'],
    },
    // 其余层级（h4-h6）按需配置
    md: {
      fontSize: ['lg', null, '2xl'],
    },
  },
});

// 扩展主题并注册自定义Heading
const theme = extendTheme({
  components: {
    Heading,
  },
  // 其他主题配置（如品牌色等）
});

export default theme;

2. 保持现有渲染代码无需修改

你的renderRule代码不需要额外设置size props，因为Chakra会根据as={h${node.level}}自动匹配对应的size配置：

renderRule(isHeading, ({ node, children, key }) => {
  return (
    <Heading key={key} as={`h${node.level}`} pt={6} pb={4}>
      {children}
    </Heading>
  );
});

额外说明 #

• 如果想强制所有Heading使用统一的size，可以在defineStyleConfig中设置defaultProps:

  const Heading = defineStyleConfig({
    // ...其他配置
    defaultProps: {
      size: 'custom-size', // 需先在sizes中定义custom-size
    },
  });
  

• 若要全局修改字体尺寸基准，也可以修改主题的fontSizes配置，但这会影响所有使用该尺寸的组件，不如直接修改Heading的sizes精准。

内容的提问来源于stack exchange，提问作者philolegein