Wie verwende ich dieselbe Farbvariable sowohl in der Storybook-Palette als auch in der Komponente?

Question

Ich habe eine UI-Komponentenbibliothek erstellt und Storybook verwendet, um Dokumentation und Beispiele dafür bereitzustellen.

Mein Ziel ist es, eine Farbpalette in der SCSS-Datei zu deklarieren und sie in Komponenten und Storybook-Paletten zu verwenden.

Storybook Palette ist eine integrierte Storybook-Komponente, mit der Sie eine Dokumentation für Ihre Farbpalette erstellen können.

Ich erwarte also, dass ich, wenn sich die Farben des Designsystems ändern, einfach den SCSS-Variablenwert ändern kann und sowohl die Farbpalette als auch die Komponente mit dem neuen Farbwert aktualisiert werden.

Leider ist die Storybook-Dokumentation in diesem Abschnitt dürftig und die Beispiele enthalten nur fest codierte Farben. Die Farbpalettenseite ist eine MDX-Datei, daher weiß ich nicht, wie man dort SCSS-Variablen importiert und verwendet.

Gibt es einen Weg, mein Ziel zu erreichen?

Answer 1

今晚在查找我遇到的相同问题时遇到了这个。经过一些谷歌搜索，我也找到了这个：https://dev.to/benrobertson/color-swatches-in-storybook-4aa9。我还没有尝试过，但想分享给你，如果你想试一试的话。我计划在周末测试一下。