如何解决CSS动画规则不适用于React,MUI
我正在尝试使用单独的useStyles.js文件使按钮在React中使用CSS进行动画处理。我要为其添加样式的按钮组件是 Material-UI组件,我认为这应该不是问题。
我已经使用本机CSS为简单的HTML元素(例如按钮和div,以及SVG-s)制作动画,并且一切正常。
标题与动画关键帧一起正常工作,并且按钮在悬停时会更改其颜色,但我也想将其放大,以便使其聚焦。
这是我在 useStyles.js 中编写的代码段:
button: {
paddingRight: theme.spacing(3),paddingLeft: theme.spacing(3),'&:hover': {
backgroundColor: theme.palette.primary.main,transform: scale(1.2)
}},title: { animation: '$fadeIn 2s ease-out' },'@keyframes fadeIn': {
from: { opacity: 0 },to: { opacity: 1 }
}
这是组件内部的内容:
const classes = useStyles()
<Button variant='outlined' color='secondary' className={classes.button}>I am the button</Button>
它还不适用于大多数CSS动画规则,例如translateX和Y,旋转等。
据我所知,语法和导入/导出应该没问题。
有人告诉我,以某种方式仅用JS中的CSS即可解决此问题,我只是不想立即进入动画库。 如果有人可以帮助,将不胜感激,谢谢!!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。