Глобальные стили в storybook

Question

Глобальные стили в storybook

Dlazder Мудрец (16875), на голосовании 11 месяцев назад

Здравствуйте, проблема такова: кнопка использует глобальные css переменные, а в сторибуке компонент рендерится изолированно, браузер не находит этих переменных. Пытался импортировать глобальный scss файл в сторибук компонент, не помогло. Доку не понял, другие материалы устаревшие. Может кто работал со сторибуком, подскажет?

Answer 1

Проблема с изоляцией стилей в Storybook может возникнуть из-за того, что Storybook по умолчанию применяет изоляцию стилей для каждой истории (story).

1. Создай файл .storybook/preview.js, если его еще нет. Импортируй свой глобальный стиль в этот файл:

 import '../путь/к/глобальному/стилю.css';

Воспользуйся аддоном @storybook/addon-styles