1 回答
TA貢獻1824條經驗 獲得超8個贊
您可以將您的css輸入作為道具傳遞給您的AnimatedLoader
const AnimatedLoader = ({css={
height: 45,
width: 45
}}) => {
return (
<div
{...css}
>
<AnimatedIcon
css={{
animationDelay: '0.7s',
height: 35,
left: 10,
position: 'absolute',
top: 10,
width: 35
}}
// ....
如果您需要做更復雜的事情,傳入一個將不同樣式選項描述為一個組的 prop 可能更明智。因此,isSmallSize作為布爾值或不同大小作為枚舉等。
然后在您的組件中根據道具調整樣式。
const AnimatedLoader = ({ isSmallSize = false }) => {
const outerSize = isSmallSize ?
{ height: 45, width: 45 } : { height: 1, width: 1 }
const iconSize = isSmallSize ?
{ height: 35, width: 35 } : { height: 1, width: 1 }
return (
<div css={{ ...outerSize }}>
<AnimatedIcon
css={{
animationDelay: '0.7s',
left: 10,
position: 'absolute',
top: 10,
...iconSize
}}
/>
<AnimatedIcon
css={{
animationDelay: '0.7s',
display: 'none',
left: 0,
top: 0,
...iconSize
}}
/>
<div
css={{
borderRadius: 20,
borderStyle: 'solid',
borderWidth: 3,
position: 'absolute',
...iconSize
}}
/>
</div>
)
}
添加回答
舉報
