如何在highcharts-react-official中定义并应用全局自定义主题

highcharts-react-official 本身是对原生 Highcharts 的轻量React封装，没有改写原生的全局配置逻辑，你提到的Highcharts.theme = style、Highcharts.setOptions(Highcharts.theme)原生方法可以直接使用，完全等效。

• 第一步：在项目中引入依赖

import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

注：如果你的项目是多入口的，把这段引入和后续的全局配置放在所有图表组件加载之前执行即可，比如放在项目根入口文件index.js/app.tsx中。

• 第二步：定义包含自定义字体的全局主题

const customTheme = {
  chart: {
    style: {
      fontFamily: "你的目标字体, system-ui, sans-serif"
    }
  },
  // 覆盖所有内置模块的文本字体
  xAxis: {
    labels: { style: { fontFamily: "你的目标字体, system-ui, sans-serif" } },
    title: { style: { fontFamily: "你的目标字体, system-ui, sans-serif" } }
  },
  yAxis: {
    labels: { style: { fontFamily: "你的目标字体, system-ui, sans-serif" } },
    title: { style: { fontFamily: "你的目标字体, system-ui, sans-serif" } }
  },
  legend: {
    itemStyle: { fontFamily: "你的目标字体, system-ui, sans-serif" }
  },
  tooltip: {
    style: { fontFamily: "你的目标字体, system-ui, sans-serif" }
  },
  credits: {
    style: { fontFamily: "你的目标字体, system-ui, sans-serif" }
  }
}

• 第三步：全局应用主题

Highcharts.theme = customTheme
Highcharts.setOptions(Highcharts.theme)

配置完成后，所有后续渲染的HighchartsReact组件都会默认继承该全局主题的字体配置，不需要再给每个图表单独重复传样式。如果有单个图表需要特殊覆盖，直接给该组件的options属性传入对应优先级更高的样式配置即可。

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