storybook - 故事书中的模拟悬停状态?
问题描述
我的组件中有一个悬停样式:
const style = css`
color: blue;
&:hover {
color: red;
}
`;
您可以在 Storybook 中模拟它,以便无需手动将鼠标悬停在组件上即可显示它吗?
解决方案
由于在 Storybook 中您需要显示组件悬停外观,而不是正确模拟悬停相关的东西,
第一个选项是添加一个与:hover样式相同的 CSS 类:
// scss
.component {
&:hover, &.__hover {
color: red;
}
}
// JSX (story)
const ComponentWithHover = () => <Component className="component __hover">Component with hover</Component>
第二个是使用这个插件。
推荐阅读
- reactjs - 设置新后状态未更新
- mongodb - Sharded Mongodb 随机停止
- c# - “dotnet publish”后的 Properties.Resources 不返回文本文件内容
- javascript - 如何在对象内部和对象外部处理js前端中的后端错误
- javascript - 如何更新浏览器列表?
- javascript - react-native-google-signin 在 React-native 0.60 中不起作用
- sql - 如何解决 PostgreSQL 函数中“列引用“id”不明确”的问题?
- c# - 如何使文本框一起监听 Keypress-Event 和 InputBinding
- javascript - 如何计算和记录对象数组中的重复次数
- javascript - useContext 导致不需要的重新渲染