Storybook требует, чтобы компонент Ant Design по умолчанию был экспортирован для применения стиля.

Я хочу разработать некоторые из моих компонентов React с помощью Ant Design и задокументировать их в Storybook.

И сборник рассказов, и компоненты написаны правильно и работают.

modal.stories.js

import React from "react";
import { action } from "@storybook/addon-actions";
import { Button } from "@storybook/react/demo";
import { BasicModal } from "./BasicModal";
import { Modal } from "antd"; // IF I REMOVE THIS ANT DESIGN DOESN'T APPLY.

export default {
  title: "Modals"
};

export const basicModal = () => <BasicModal visible={true} />;
export const basicModal2 = () => <Modal visible={true} />; //IF I REMOVE THIS ANT DESIGN DOESN'T APPLY.

BasicModal.tsx

import React, { ReactNode } from "react";
import { Modal } from "antd";
interface BasicModalProps {}

export const BasicModal: React.FC<BasicModalProps> = ({}) => {
  return (
    <Modal
      title="Basic Modal"
      visible={true}
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </Modal>
  );
};

webpack.config.js

const path = require("path");

module.exports = {
    module: {
        rules: [
            {
                loader: 'babel-loader',
                exclude: /node_modules/,
                test: /\.js$/,
                options: {
                    presets: ["@babel/react"],
                    plugins: [
                        ['import', {libraryName: "antd", style: true}]
                    ]
                },
            },
            {
                test: /\.less$/,
                loaders: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "less-loader",

                        options: {
                            modifyVars: {"@primary-color": "#d8df19"},
                            javascriptEnabled: true
                        }
                    }
                ],
                include: path.resolve(__dirname, "../")
            }
        ]
    }
};

Однако я столкнулся с проблемой применения стилей в modal.stories.js. Если я не включаю import { modal } from 'antd' и экспортирую константу с использованием компонента Modal, к моему собственному стилевому компоненту не будет применен стиль дизайна муравья.

В приведенном выше примере я получаю два модальных окна basicModal и basicModal2, оба стилизованы с помощью ant-design. Но если я закомментирую basicModal2, basicModal вернется к стилю CSS по умолчанию.

Есть ли способ исправить это, не добавляя компонент Ant Design по умолчанию в каждую историю?


reactjs antd storybook
person Carrein    schedule 25.10.2019    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Импортируйте antd стили import 'antd/dist/antd.css'; в config.js файл сборника рассказов:

// @ .storybook/config.js 
import { configure } from '@storybook/react';
import 'antd/dist/antd.css';

function loadStories() {
  const req = require.context('stories', true, /\.stories\.js$/);
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

См. поддержку CSS в storybook docs.

person Dennis Vash    schedule 25.10.2019

arrow_upward
9
arrow_downward

Сборник рассказов v6

Войдите (или создайте) .storybook/preview.js и добавьте import 'antd/dist/antd.css'; в начало.

Пример .storybook/preview.js

import 'antd/dist/antd.css';

export const parameters = {
    actions: { argTypesRegex: '^on[A-Z].*' },
};
person radihuq    schedule 20.09.2020
comment
Этот сработал для меня, спасибо! - person ricopella; 22.12.2020
comment
Но как изменить переменные темы из файла .less? - person Abdurauf Sherkulov; 30.03.2021
comment
У меня не сработало. Он по-прежнему говорит: ОШИБКА в ./node_modules/antd/dist/antd.css 13: 6 Ошибка синтаксического анализа модуля: Неожиданный токен (13: 6). Вам может потребоваться соответствующий загрузчик для обработки этого типа файла, в настоящее время загрузчики не настроены для обработки этот файл. См. webpack.js.org/concepts#loaders. - person Adrián E.; 06.07.2021