无法动态设置组件样式 - TypeScript , Styled-component

Question

我在这里挣扎，我担心我不明白发生了什么。我正在关注 styled-components 的文档一切似乎都像他们描述的那样，但似乎对我这边不起作用。我正在尝试渲染 Card/div 或基本上根据来自父级

的道具对其进行扩展

...
const [open, setOpen] = useState<boolean>(false)
...
return ( 
   <CardWrapper
        open={open}
        ... />
...
)

这里我在样式组件中使用我的状态

import { keyframes, css } from '@emotion/react'

import styled from '@emotion/styled/macro'

const expandAnimation = keyframes`
  0% {
    height: 180px;
  }
  100% {
    height: 240px;
  }
`

const unexpandAnimation = keyframes`
  0% {
    height: 240px;
  }
  100% {
    height: 180px;
  }
`

...

export const CardWrapper = styled.div<{open: boolean}>`
  animation: ${(open) => (open 
  ? css`${expandAnimation} 1s ease-in-out ;` 
  : css`${unexpandAnimation} 1s ease-in-out;`)} ;
`

也尝试一下

export const CardWrapper = styled.div<{open: boolean}>`
   ${({ open }) => open && css`
    animation-name: ${expandAnimation }
  `}
`

但我好像做的不对。我对样式组件很陌生，但如果有人能告诉我我做错了什么。

Answer 1

更新为了让我们显示一些动画，我们需要提供一个属性 ease 和一个方向属性。在我的例子中，我使用 forwards 和 backawrds

export const CardWrapper = styled.div<{open: boolean}>`
  ${({ open }) => (open
        ? css`animation: ${expandAnimation} 0.7s ease forwards`
        : css`animation: ${unexpandAnimation}1s ease backwards `)
}
`

无法动态设置组件样式 - TypeScript , Styled-component

Not able to dynamically style component - TypeScript , Styled-component

typescript

reactjs

styled-components