reactjs - 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
来自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}
</>
)
}
推荐阅读
- bash - 使用 bash 获取当前分支并存储为变量
- javascript - $http.get 处理两个不同的调用
- spss-modeler - 如何在 SPSS Modeler 中添加日期?
- c++ - C++ DR 115: Address of template specialization even if deduction fails
- javascript - bash: jest: command not found
- excel - Why did VBA code to build charts stop working between version 16.26 and 16.27?
- python - Python inheritance causes illegal attribute error
- vue.js - 在 Vue 中将对象属性与子组件同步
- python - How to make a new df from random subset of rows from another df without duplicates?
- bootstrap-4 - bootstrap-validate for select inputs for bootstrap 4