React Chakra UI全局主题按断点切换字体失效问题求助

问题描述 #

尝试配置Chakra UI主题，让应用根据断点切换全局字体族，但代码未生效：

export const breakpoints = {
  sm: "600px",
  lg: "800px",
}

export const fonts = {
  heading: "SF pro",
  global: {
    html: {
      sm: "SF pro",
      lg: "Roboto"
    }
  }
}

export const theme = extendTheme({
  fontSizes,
  breakpoints,
  semanticTokens,
  colors,
  fonts,
  components,
})

问题原因 #

Chakra UI的fonts.global配置不支持嵌套断点键值对，该字段仅用于设置静态全局字体样式，无法解析响应式断点规则。

解决方案 #

方法1：使用全局样式的响应式数组语法 #

利用Chakra UI响应式属性的数组写法，直接在全局样式中定义断点对应的字体族：

export const breakpoints = {
  sm: "600px",
  lg: "800px",
}

export const theme = extendTheme({
  breakpoints,
  fonts: {
    heading: "SF pro",
    body: "SF pro", // 定义基础字体族
  },
  styles: {
    global: {
      html: {
        // 数组顺序对应断点：sm及以下、md（600-800px）、lg及以上
        fontFamily: ["SF pro", null, "Roboto"],
      },
    },
  },
})

• 数组中null表示继承前一个断点的样式，避免重复编写相同值
• 断点顺序与你定义的breakpoints键顺序一致

方法2：使用语义化令牌（semanticTokens） #

通过语义化令牌定义响应式字体族，更适合复杂的主题配置：

export const breakpoints = {
  sm: "600px",
  lg: "800px",
}

export const theme = extendTheme({
  breakpoints,
  semanticTokens: {
    fonts: {
      body: {
        default: "SF pro",
        _lg: "Roboto", // 针对lg断点设置字体族
      },
    },
  },
  styles: {
    global: {
      html: {
        fontFamily: "var(--chakra-fonts-body)",
      },
    },
  },
})

• 语义化令牌支持_断点名称的语法来定义响应式规则
• 全局样式通过CSS变量引用语义化令牌的值

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