如何在 framer-motion styled-component 上定义道具? (PSA)
Posted
技术标签:
【中文标题】如何在 framer-motion styled-component 上定义道具? (PSA)【英文标题】:How to define props on framer-motion styled-component? (PSA) 【发布时间】:2021-12-13 18:17:22 【问题描述】:PSA:
(不是问题,但我在堆栈上没有看到任何答案,所以这是答案。)
在包装动作的样式组件上定义道具,在使用styled()
包装动作时如何定义它们有点令人困惑。
如何根据样式化组件定义props 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);
`;
如何在代码中不定义道具:
import styled from "styled-components";
interface Props
height?: number;
const Container = styled.div<Props>`
height: $( height ) => height;
`;
export default Container;
如何在你的代码中定义道具with动作:
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;
【问题讨论】:
【参考方案1】:问题在于您错误地定义了“运动 div”。应该这样定义:
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;
`;
正如您在上面看到的,您只需将motion.div
作为任何其他组件传入styled
函数。
【讨论】:
以上是关于如何在 framer-motion styled-component 上定义道具? (PSA)的主要内容,如果未能解决你的问题,请参考以下文章
Firefox 上的 react-spring 和 framer-motion 滞后
Styled-components vs Emotion - 如何在 Styled-components 上重新应用 css`style` 函数
Flutter:如何在我的 Style 类中创建构造函数? [复制]
如何在 react 和 next js 中使用 Styled 组件创建全局样式,使用 css 文件和 styled 组件的组合是不是更好?