React 组件未使用 linaria 进行动画处理答案

【问题标题】：React component not animated with linariaReact 组件未使用 linaria 进行动画处理
【发布时间】：2021-08-03 21:45:59
【问题描述】：

我有一个组件，其宽度必须根据道具而改变。

我的组件风格：

  const SidebarContainer = styled.div`
    width: ${props.isOpen ? 340 : 73}px;
    height: 100vh;
    background-color: ${colors.white100};
    padding-left: 30px;
    padding-top: 17px;
    overflow: hidden;
    position: fixed;
    transition: all 0.5s ease;
`

样式变化，但没有过渡。我尝试使用数据attributes，但它不起作用。

我该如何解决这个问题？

【问题讨论】：

尝试宽度：${({ isOpen }) => (isOpen ? '340' : '73')}px
尝试 ${({props.isOpen }) => (props.isOpen ? '340' : '73')}px，但什么也没有

标签： css reactjs animation

【解决方案1】：

我通过styled-tools和ifProp解决了这个问题

import { ifProp } from 'styled-tools';

const SidebarContainer = styled.div<{ isOpen: boolean }>`
  width: ${ifProp('isOpen', 34, 7.5)}rem;
  height: 100vh;
  background-color: ${colors.white100};
  padding-top: 1.7rem;
  overflow: hidden;
  position: fixed;
  transition: all 0.3s ease;
  border-box: box-sizing;
`;

【讨论】：