Как удалить стандартные стили холста для сборника рассказов?
Storybook применяет стили по умолчанию к iframe холста истории. Это мешает моим историям выглядеть так, как они должны. Как я могу избавиться от стилей Storybook по умолчанию?
Например, вот стиль по умолчанию для элемента h2 (из page.css Storybook):
Источником этого page.css является webpack://src/stories/page.css.
Если я добавлю стили в preview-head.html, сборник рассказов применит мои пользовательские стили И стили сборника рассказов по умолчанию, при этом стили сборника рассказов по умолчанию будут иметь приоритет (если только мой пользовательский стиль не имеет строгой специфики).
@DaniilLoban спасибо, но тогда мне пришлось бы выяснить, каковы все значения по умолчанию, и вручную сбросить их. И если Storybook позже обновится с дополнительными значениями по умолчанию, мне придется сбросить их снова. Кажется очень странным, что Storybook (инструмент предварительного просмотра пользовательского интерфейса) не позволяет нам удалять их стили по умолчанию.
может это github.com/storybookjs/storybook/issues/8144 ?
Спасибо @DaniilLoban. Я ценю, что вы изучаете это. Эта проблема с github связана со сбросом настроек браузера по умолчанию. Но помимо стандартного браузера Storybook применяет собственное значение по умолчанию. Мне нужно удалить это, и я надеялся, что в раскадровке есть настройка, в которой я могу это сделать. Я уже использую material-ui's CssBaseline (material-ui.com/components/css-baseline), чтобы сбросить настройки браузера по умолчанию, но стили Storybook по умолчанию переопределяют этот сброс.
Извините, @Johnny Oshika, идей нет.
@DaniilLoban Спасибо за помощь! Я надеюсь, что у кого-то есть ответ на это.
@JohnnyOshika, ты когда-нибудь это понимал? У меня та же проблема, Storybook полностью ломает мой компонент, который отлично работает вне SB. Я также хочу отключить все стили SB.
@Fernando смотрите ответ aedwards22 ниже. Это сработало для меня.
Ответы 2
По умолчанию при установке Storybook через npx sb init для React Storybook добавляет файл Page.tsx (.js) в src/stories. В этом файле они import './page.css'; просто удаляют этот импорт, и все будет готово.
Надеюсь, это ваше исправление... Оно может отличаться в зависимости от того, какой фреймворк вы используете.
Это было оно! Так просто. Я удивлен, что больше людей не ищут этот сброс. Большое спасибо!
Хотя это работает для меня, странно, что Storybook позволяет CSS из другого модуля проникать в другие модули, где вам не нужен этот стиль.
Как это работает, если я установил сборник рассказов через HTML? Он по-прежнему добавляет этот странный .css-1p8ieni к моим элементам с их пользовательским стилем. Как я могу удалить это?
Я удалил все встроенные css и импорт и все еще имею классы .css-*
@jjalonso, можете ли вы предоставить ссылку на репо?
В конце написал ответ. Я решил это
Не используйте синтаксис многомерных выражений.
У меня была такая же проблема, потому что я использовал синтаксис MDX.
Когда я начал использовать синтаксис экспорта, он не применял никаких встроенных классов CSS.
может будет полезно specificity.keegan.st (просто увеличьте специфичность)