公益廣告：
（不是問題，但我在堆疊上沒有看到任何答案，所以這是答案。）
在包裹動作的樣式化組件上定義道具，當使用styled().
如何根據樣式化組件檔案定義道具
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;
如何在你的代碼中用動作定義道具：
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;
uj5u.com熱心網友回復：
問題是你定義你的“運動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函式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/341115.html