Since Styled-component purpose is having a clean code without "className={}", "class={}" on my code, how can I use it with Storybook?
For example, if I have a button that's gray and I need a red-error-variant, on Storybook I should have something like:
<Button className={error} label='That's an error!'> </Button>
But with styled-components I should create a:
const ErrorButton = styled.button`
background-color: red;
`
On JSX:
<ErrorButton> That's an error! </ErrorButton>
How can I use styled-components with Storybook without adding those variants as class/className? Should it be used together? Should I have different components for each variant I want to use (size, color, etc), like </ BigErrorButton> and </ SmallErrorButton>?
Thanks!
