我的css模块在Storybook中无法正常工作。没有任何错误,只是无法工作。我不明白问题出在哪里。这是storybook渲染按钮的图像:
Button.js 文件:
import React from "react";
import PropTypes from "prop-types";
import style from "./styles.module.css";
const Button = ({ type, children }) => (
<button className={style.button}>{children}</button>
);
Button.propTypes = {
children: PropTypes.node.isRequired,
type: PropTypes.string,
};
Button.defaultProps = {
children: "primary",
type: "primary",
};
export default Button;
Button.stories.js文件:
import React from "react";
import Button from "./Button";
export default {
component: Button,
title: "Test/Button",
};
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
children: "xx ",
};
export const Secondary = Template.bind({});
Secondary.args = {
children: "xx ",
type: "secundary",
};
styles.module.css文件:
.button {
background: yellow;
border: 1px solid var(--colors-transparent);
}
.test {
background: red;
color: var(--colors-white);
}
.type-primary {
background: red;
color: var(--colors-white);
}
.type-secundary {
background: rgb(12, 177, 163);
color: var(--colors-white);
}
package.json文件:
"devDependencies": {
"@babel/core": "^7.16.0",
"@storybook/addon-actions": "^6.3.12",
"@storybook/addon-essentials": "^6.3.12",
"@storybook/addon-links": "^6.3.12",
"@storybook/react": "^6.3.12",
"babel-loader": "^8.2.3",
"classnames": "^2.3.1",
"react": "^16.14.0",
"react-scripts": "^4.0.3"
}
我尝试了其他选项。
<button className={style["button"]}>{children}</button>
也许有一些解决方法?