如何在Storybook中调整PNG格式brandImage的宽高？

不用转SVG也能调整PNG品牌图的尺寸，有两种可行方案：

方案一：通过Data URL嵌入内联样式 #

把PNG转成Base64编码后，在Data URL里内嵌CSS样式控制宽高。示例代码如下：

import { create } from '@storybook/theming';

export default create({
  base: 'light',
  brandImage: 'data:image/png;base64,你的PNGBase64编码内容,<style>img { width: 120px; height: 40px; object-fit: contain; }</style>',
});

这种方式利用Data URL特性，让内嵌样式直接作用于渲染的img元素，强制覆盖默认尺寸。

方案二：自定义Manager Head添加全局样式 #

在.storybook/manager-head.html文件中添加CSS，直接定位品牌图的DOM元素修改样式：

<style>
  .sb-header__logo img {
    width: 100px !important;
    height: 30px !important;
    object-fit: contain;
  }
</style>

Storybook头部logo元素有固定类名sb-header__logo，通过!important强制覆盖默认样式，就能精准调整PNG的显示尺寸。

这两种方法都无需将PNG转为SVG，其中方案二更直观，维护起来也更方便。

内容的提问来源于stack exchange，提问作者GʀᴜᴍᴘʏCᴀᴛ