[英]How to define props on framer-motion styled-component? (PSA)
(not a question but I didn't see any answers to this on stack so here's the answer.) (不是问题,但我在堆栈上没有看到任何答案,所以这是答案。)
Define props on a styled-components that wraps a motion, it's a little confusing how to define them when wrapping motion with styled()
.在包裹动作的样式组件上定义道具,当使用styled()
包裹动作时如何定义它们有点令人困惑。
how to define props according to styled components docs如何根据样式化组件文档定义道具
import styled from 'styled-components';
import Header from './Header';
interface TitleProps {
readonly isActive: boolean;
}
const Title = styled.h1<TitleProps>`
color: ${(props) => (props.isActive ? props.theme.colors.main : props.theme.colors.secondary)};
`;
How to define the props in your code without motion:如何在没有动作的情况下在代码中定义道具:
import styled from "styled-components";
interface Props {
height?: number;
}
const Container = styled.div<Props>`
height: ${({ height }) => height};
`;
export default Container;
How to define the props in your code with motion:如何在你的代码中用动作定义道具:
import { HTMLMotionProps, motion } from "framer-motion";
import styled from "styled-components";
/**
* notice the props extend HTMLMotionProps<"div"> this is so all the default
* props are passed such as `onClick`
*/
interface Props extends HTMLMotionProps<"div"> {
height?: number;
}
//notice motion is called as a function instead of `motion.div`
const Container = styled(motion<Props>("div"))`
height: ${({ height }) => height};
`;
export default Container;
The problem is that you are defining your "motion div" wrong.问题是你定义你的“运动div”是错误的。 It should be defined this way instead:应该这样定义:
interface Props {
height?: number;
}
// motion is an object that gives you access to the html tags (like the div)
const Container = styled(motion.div)<Props>`
height: ${({ height }) => height};
`;
As you can see above, you just need to pass in motion.div
as any other component, into the styled
function.正如您在上面看到的,您只需将motion.div
作为任何其他组件传递到styled
函数中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.