How to import existing jsx typography library into Storybook instead of using a css file?

I'm trying to import an H1.jsx file into Storybook from my typography library so I don't always have to update both the library and storybook whenever I make changes. How would I import the H1.jsx file into Storybook? The top three files is me importing from typograpy.css file.

typography.js

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

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

typography.stories.js

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

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

typography.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;
`;