Рубрики
Без рубрики

Стили по умолчанию в Storebook со стильными компонентами

Недавно я строил сборник для моего нового проекта. Хотя я наслаждаюсь инкапсуляцией, он обеспечивает, … помечен со стилейкомпонентами, реагировать, JavaScript, StoryBook.

Недавно я строил сборник для моего нового проекта. Хотя я наслаждаюсь инкапсуляцией, она обеспечивает, глобальные стили, такие как сбрасы, все еще важны. Несмотря на то, что он не сильно меняется, я все еще хотел, чтобы они были в моей любой истории.

Глобальный сброс

Мои глобальные стили созданы, используя Стиль-перезагрузка дополнение к Слифовые компоненты Отказ Это настраиваемый сброс нагрузки – то, что я искал довольно некоторое время.

Сам код выглядит довольно просто:

import { createGlobalStyle } from "styled-components";
import reboot from "styled-reboot";

import design from "./";

const options = {
  bodyColor: design.brand("violet"),
  bodyBg: design.brand("white"),
  fontSizeBase: "8px",
  linkColor: design.brand("base"),
  linkHoverColor: design.brand("base"),
};

const GlobalStyle = createGlobalStyle`
  ${reboot(options)}
`;

export default GlobalStyle;

Это дает нам компонент, который мы можем разместить подобное друг другу. Например , так:

import GlobalStyle from "../globalStyle";

const App = () => (
  
    
    
Hello

  
);

Отличные вещи, но Как я могу использовать его в моих историях?

Статья книги

Я использую Desearbook в качестве моей главной среды для разработки UI. Так что очевидно, что я хочу, чтобы это было максимально отразить фактический результат. Включение глобального сброса является обязательным здесь.

Мой первый подход был просто добавить Компонент к каждой истории, как это:

storiesOf("UI", module)
  .add("Button", () => (
    
      
      
    
  ));

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

Я слишком ленивый для этого. Я должен был понять что-то лучшее.

Тогда я вспомнил Декораторы Вариант рассказывает книгу!

Декораторы являются компонентами обертки или декораторы с рассказами, которые обертывают историю.

— Введение вдонты

Итак, написание такого декоратора – единственное, что осталось.

Написание декоратора

Весь дополнительный код для съемника лежит в … config.js Файл, в основном в .storybook каталог (если не указан иначе). Мой выглядел так: 

import { configure } from '@storybook/react';

const req = require.context('../../', true, /\.stories\.tsx$/);

function loadStories() {
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module);

Простое сканирование для историй. Итак, следующая вещь – добавить декоратор.

import { addDecorator, configure } from '@storybook/react';

import * as React from 'react';
import GlobalStyle from '.../ui/globalStyle';

const req = require.context('../../', true, /\.stories\.tsx$/);

function loadStories() {
  req.keys().forEach(filename => req(filename))
}

const withGlobal = (cb) => (
  
    
    {cb()}
  
);

addDecorator(withGlobal);
configure(loadStories, module);

Давайте поговорим об этом.

Во-первых, мы импортируем Adddecorator Функция, она будет нести ответственность за применение нашего дополнения к системе.

Во-вторых, мы импортируем реагирование, так как мы создадим немного JSX, а стиль создан ранее.

Следующий шаг создает сам декоратор. Простая функция с одним аргументом. Я завернул его в Реагировать. Фрагмент который позволяет использовать несколько детей без создания дополнительных элементов DOM. Если вы используете реагирование в версии ниже 16, рассмотрим Div как нейтральная обертка.

Последний шаг – применить декоратор, используя Adddecorator Отказ

Просто как тот. Что такое супер важно, это объявить Настроить выполнение как последняя команда.

Теперь дополнительный код CSS будет добавлен в каждую из ваших источников без каких-либо дополнительных изменений.

Оригинал: “https://dev.to/tomekbuszewski/default-styles-in-storybook-with-styled-components-58dp”

Читайте ещё по теме: