时间戳

首页 > 解决方案 > 如何将现有的 jsx 排版库导入 Storybook 而不是使用 css 文件？

javascript - 如何将现有的 jsx 排版库导入 Storybook 而不是使用 css 文件？

问题描述

我正在尝试将 H1.jsx 文件从我的排版库导入 Storybook，因此每当我进行更改时，我不必总是更新库和故事书。如何将 H1.jsx 文件导入 Storybook？前三个文件是我从typograpy.css 文件中导入的。

排版.js

export const Typography = ({ size, label }) => {
  return (
    <div
      className={['storybook-typography', `storybook-typography--${size}`].join(
        ' '
      )}
    >
      {label}
    </div>
  );
};

Typography.propTypes = {
  size: PropTypes.oneOf([
    'h1',

排版.stories.js

const Template = (args) => <Typography {...args} />;

export const H1 = Template.bind({});
H1.args = {
  size: 'h1',
  label: 'H1/Lato/Light/96px',
};

排版.css

.storybook-typography {
  font-family: 'lato';
}

.storybook-typography--h1 {
  font-size: 96px;
  font-style: 'normal';
  font-weight: 300;
  letter-spacing: -1.5px;
}

H1.jsx

export const H1 = styled.div`
  font-size: 96px;
  font-family: lato;
  font-style: 'normal';
  font-weight: 300;
  letter-spacing: -1.5px;
`;

标签： javascriptcssreactjsstorybook

解决方案

推荐阅读