Я столкнулся с этой проблемой, когда передо мной встала задача добавить кастомные стили (а конкретно шрифт) в сторисы сторибука, чтобы они полностью соответствовали моим react-компонентам. Добавлять их отдельно в каждую сторю не продуктивно, поэтому нужно это сделать где-то в корне.
В официальной документации есть раздел, посвященный темизации storybook.
И он вполне решает большинство вопросов, но уже не помню по какой причине, но описанные там способы мне не помогли…а может быть я своими кривыми руками что-то сделал не так 🙂 А, вспомнил. Мне нужно было изменить шрифт на вкладках Canvas и Docs, а темизация затрагивает только сам сторибук, но не область вывода компонетов. В общем есть достаточно простой способ, а именно в папке .storybook нужно создать файл preview-head.html
а внутри него добавить следующий код:
|
1 2 3 4 5 6 |
<link rel="stylesheet" href="fonts/Roboto/Roboto.css"> <style> body { font-family: Roboto, sans-serif; } </style> |
preview-head.html: переопределяет содержимое тега <head> HTML-страницы предварительного просмотра IFRAME, влияя на отображаемые компоненты на вкладках Canvas и Docs.
Вот такой не сложный способ добавить кастомные стили в Canvas и Docs области сторибука. Буду рад, если эта небольшая заметка окажется для вас полезной.
Спасибо за сайт!
Рад, что сайт полезен 🤞