Как добавить кастомные стили CSS в storybook (темизация Canvas и Docs вкладок)

Я столкнулся с этой проблемой, когда передо мной встала задача добавить кастомные стили (а конкретно шрифт) в сторисы сторибука, чтобы они полностью соответствовали моим react-компонентам. Добавлять их отдельно в каждую сторю не продуктивно, поэтому нужно это сделать где-то в корне.

В официальной документации есть раздел, посвященный темизации storybook.

И он вполне решает большинство вопросов, но уже не помню по какой причине, но описанные там способы мне не помогли…а может быть я своими кривыми руками что-то сделал не так 🙂 А, вспомнил. Мне нужно было изменить шрифт на вкладках Canvas и Docs, а темизация затрагивает только сам сторибук, но не область вывода компонетов. В общем есть достаточно простой способ, а именно в папке .storybook нужно создать файл preview-head.html

а внутри него добавить следующий код:

preview-head.html: переопределяет содержимое тега <head> HTML-страницы предварительного просмотра IFRAME, влияя на отображаемые компоненты на вкладках Canvas и Docs.

Вот такой не сложный способ добавить кастомные стили в Canvas и Docs области сторибука. Буду рад, если эта небольшая заметка окажется для вас полезной.

Добавить комментарий

Ваш адрес email не будет опубликован.