如何更改故事书中的特定元素样式？

Posted 2023-02-19

【中文标题】如何更改故事书中的特定元素样式？

【英文标题】：How to change specific elements style in storybook?

【发布时间】：2021-12-16 09:51:29

【问题描述】：

在我的情况下，我只想更改默认的默认颜色，以默认的主页部分为例：

We recommend building UIs with a [**component-driven**](https://componentdriven.org)

这导致： 我想把那个蓝色改成红色。

我看到a类有以下主题：

class="sbdocs sbdocs-a css-19nbuh3"

所以，我创建了一个 .storybook/manager-head.html 并在里面写了：

<style>
    .sbdocs-a 
    color: red;
  

但我没有看到任何变化！我究竟做错了什么？

【问题讨论】：

很确定这只是一个错字，但您的 style 标签没有关闭

是的，它已关闭，我只是粘贴错误

【参考方案1】：

您可以通过两种方式做到这一点，但都在.storybook/preview.js。

更改文档主题：

export const parameters = 
  ...
  docs: 
    theme: 
      colorSecondary: 'red',
    ,
  ,
  ...
;

这会导致其他不需要的组件改变颜色，因为这种颜色不仅仅用于链接。

为文档提供您自己的<a> 组件[最佳解决方案]：

export const parameters = 
  ...
  docs: 
    components: 
      a: (children, ...args) => <a style=color: 'red' ...args>children</a>
    ,
  ,
  ...
;

这是我发现的文档组件样式的最佳方式。

还可以在storybook sources 中找到用于a 的令牌名称

有关完整主题示例，请参阅 theming docs page。

【讨论】：

似乎不起作用： 仍然是蓝色的...

您究竟想要更改哪个<a> 的颜色？请提供更多信息或屏幕截图，否则我无法告诉您要覆盖哪个主题令牌

感谢您的帮助，我用信息更新了帖子

刚刚找到了确切的令牌名称和另一种方法，我已经更新了我的答案