故事书在侧边栏中添加自定义文本

Question

我遇到了故事书库+ ReactJS 的问题。我需要在故事书中的品牌图像下显示自定义文本。故事书库中有什么选项可以实现它吗？

我们是否能够以某种方式获取侧边栏实例或传递自定义渲染器函数？

Answer 1

在 .storybook 文件中的 Preview.js 中，我使用以下代码访问了侧边栏标题和组合框之间的标签，其 id 为“downshift-1-label”：

window.addEventListener('load', () => {
  const label = window.parent.document.querySelector('#downshift-1-label');
  if (label) {
    label.setAttribute(
      'style',
      'left: 5px; overflow: visible; position: relative; top: 5px; font-size: 14px;',
    );
  }
});

该样式使其正确显示在您想要的位置。

我用label.innerHTML = 'Test Text'.

旁注：我使用的是故事书 6.5.16 版本，也许新版本的故事书中没有这个标签。尚未对其进行测试，但希望您可以使用相同的window.parent.document.querySelector('.parentClassName');方法访问此标签的父级。