5

I have a hover style in my component: 

const style = css`
  color: blue;

  &:hover {
    color: red;
  }
`;

Can you mock this in Storybook so that it can be shown without having to manually hover over the component?

Evanss
  • 23,390
  • 94
  • 282
  • 505
  • 2
    Since StoryBook is just HTML, I think your answer will be about the same as this question https://stackoverflow.com/a/17226753 – zero298 May 28 '20 at 22:14

2 Answers2

2

Since in Storybook you need to show the component hover appearance, rather than correctly simulate the hover related stuff,

the first option is to add a css class with the same style as :hover :

// scss
.component {
  &:hover, &.__hover {
    color: red;
  }
}

// JSX (story)
const ComponentWithHover = () => <Component className="component __hover">Component with hover</Component>

the second one is to use this addon.

Anton
  • 639
  • 6
  • 17
0

For people discovering this question from the internet, Chromatic has provided a Storybook add-on to simulate states in components.

https://github.com/chromaui/storybook-addon-pseudo-states

Lại Tuấn Anh
  • 26
  • 2