Mock hover state в Storybook?

Question

У меня есть стиль наведения в моем компоненте:

const style = css`
  color: blue;

  &:hover {
    color: red;
  }
`;

Можете ли вы смоделировать это в Storybook, чтобы его можно было показать без необходимости вручную наводить курсор на компонент?

Answer 1

Поскольку в Storybook вам нужно показать внешний вид компонента при наведении, а не правильно имитировать материал, связанный с наведением,

первый вариант - добавить класс css с тем же стиль как : hover :

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

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

второй один должен использовать этот аддон .