如何在Storybook Design Token的presenter中修改font-family？

以下是几个无需为每个令牌类型创建自定义presenter的全局配置方案：

方案1：通过Storybook全局装饰器注入样式 #

直接给所有Storybook故事（包括插件自动生成的令牌故事）包裹一个带全局字体样式的容器。在.storybook/preview.js中添加：

import { addDecorator } from '@storybook/react';
import React from 'react';

addDecorator((story) => (
  <div style={{ fontFamily: "'open-sans', sans-serif" }}>
    {story()}
  </div>
));

这个方法会让所有故事内容都使用指定字体，包括插件生成的令牌展示组件。

方案2：通过全局CSS覆盖插件元素样式 #

找到插件生成的令牌展示元素的类名（可通过浏览器开发者工具查看，通常是类似.storybook-design-token-presenter或.storybook-design-token-container的类），然后在Storybook的全局CSS文件或preview-head.html中添加样式：

在.storybook/preview-head.html中加入：

<style>
  .storybook-design-token-presenter {
    font-family: "'open-sans', sans-serif" !important;
  }
</style>

这种方式更精准，只针对插件生成的令牌展示区域生效。

方案3：利用插件的全局配置参数 #

查看storybook-design-token插件的配置项，部分版本支持通过插件选项传递全局presenter属性。在.storybook/main.js的插件配置中尝试添加：

module.exports = {
  addons: [
    {
      name: 'storybook-design-token',
      options: {
        // 针对所有presenter设置全局样式
        presenters: {
          default: {
            style: { fontFamily: "'open-sans', sans-serif" }
          }
        }
      }
    }
  ]
};

如果你的插件版本支持这个配置，就能直接给所有默认presenter应用字体样式。

优先推荐方案1或方案2，这两种方法不需要依赖插件的特定配置，兼容性更强，能快速实现全局字体设置。

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