在品牌形象的故事书主题中如何更改徽标高度或宽度？

Question

在 Storybook 的 manager.js 中更改主题时，我找到了文档，您可以在其中添加自定义徽标：

import { create } from '@storybook/theming'
import logo from '../src/images/logo.png'

export default create({
  brandImage: logo,
})

但是我一直无法找到调整 PNG 徽标大小的方法。根据我的研究，调整大小的唯一方法似乎是在 SVG 中实现

width

或

height

：

标志.svg:

<svg width="100" height="40" viewBox="0 0 290.72 112.41" [...]

maanger.js:

import { create } from "@storybook/theming"
import logo from "../src/logo.svg"

export default create({
  brandImage: logo,
})

如果有办法设置 PNG 的 width 或 height，我无法在文档中找到方法（

params

或

themeing

）。

研究

• 故事书更改徽标
• 品牌图片链接不起作用
• 自定义主题品牌图像未显示在侧边栏中
• 故事书的样式凌驾于一切

在 Storybook 中，使用 PNG 来表示

brandImage

时，有没有一种方法可以调整

width

或

height

，而无需将其实现为 SVG？

Answer 1

我找到了一种“hacky”的方法来实现这一点：

brandTitle: `<img src="/your-logo.png" width="10px" height="10px"/>`

确保您的 png 文件位于根项目的 public 文件夹中。

Answer 2

将下面的代码放入.storybook/main.ts（或main.js）中

const config: StorybookConfig = {
    ...
    managerHead: () => `
        <style>
            .css-1rb1jn6 {
                height: 40px; // Change the size here
            }
        </style>
    `,
};