如何解决Styled-jsx 样式不适用于 Framer-Motion 元素
我觉得我快疯了。
我创建了一个新的 Nextjs 项目,通过 NPM 安装了 Framer-Motion,在开发模式下运行该项目。一切都会编译并加载页面,但是一旦我向元素添加运动,它就会消失而没有错误。
我在 PC 和 Mac 上都得到了这个。我什至删除了我的节点模块和 package.lock 文件,并回滚到我过去工作过的 Next.js 和 framer-motion 版本,但它没有成功。只是为了踢球,我用 framer-motion 创建了一个新的 React 应用程序,它在那里运行没有问题。
import {motion} from 'framer-motion';
export default function Home() {
return (
<>
<motion.div
className="test"
animate={{ scale: 1.5 }}
/>
<style jsx>{`
.test {
width: 100px;
height: 100px;
background-color: red;
}
`}</style>
</>
)
}
解决方法
那是因为您的 styled-jsx
样式没有应用于 framer-motion
元素。
要为 motion.div
元素等第三方组件设置样式,您需要使用 resolve
tag from styled-jsx/css
。
import { motion } from 'framer-motion';
import css from 'styled-jsx/css';
const { className,styles } = css.resolve`
div {
width: 100px;
height: 100px;
background: red;
}
`;
export default function Home() {
return (
<>
<motion.div
className={className}
animate={{ scale: 1.5 }}
/>
{styles}
</>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。