我希望使用 Ant Design 设计我的一些 React 组件并在 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 组件?