将转换添加到样式化组件

Question

我在React中有以下组件:

const Button = styled.div`
        width: 30px;
        height: 30px;
        position: absolute;
        right: 2em;
        top: 50%;
        transform: translateY(-50%);
        padding: 0;
        margin: 0;

        &::before,
        &::after {
          content: "";
          position: absolute;
          background-color: #3d3935;
          transition: transform 0.25s ease-out;
        }

        &::before {
          top: 0;
          left: 50%;
          width: 4px;
          height: 100%;
          margin-left: -2px;
        }

        &::after {
          top: 50%;
          left: 0;
          width: 100%;
          height: 4px;
          margin-top: -2px;
        }
`;

它只是呈现具有库样式组件的组件.它基本上显示了一个+标志.

但是,我想分别轮换每一行,使用:

    &::before {
      transform: rotate(${this.state.expanded ? '0' : '45'}deg);
    }
    &::after {
      transform: rotate(${this.state.expanded ? '0' : '135'}deg);
    }

并且效果很好,但不幸的是没有过渡(它会立即发生).试图在这些行中包含转换,但它仍然不会影响更改.

我尝试过的另一个解决方案是添加一个类,例如rotated:

    &.rotated::before {
      transform: rotate(45deg);
    }

但是样式化的组件实际上并没有提供使用它的逻辑动态更改类的可能性.

期待任何形式的帮助,谢谢.

Answer 1

您可以尝试将条件道具传递给组件.

import styled, { css } from 'styled-components';

<Button expanded={ this.state.expanded } />

然后在你SC:

const Button = styled.div`
  transform: rotate(0deg);
  transition: transform .2s ease-out;

  ${ props => props.expanded && css`
    transform: rotate(45deg);
  `};
`;

Answer 2

您还可以使用三元运算符：

const Button = styled.div`
  transform: ${props => props.expanded ? 'rotate(180deg)' : 'rotate(0deg)'};
  transition: transform .2s ease-out;
`;

还要确保在您使用它的函数之外定义按钮。现在就犯了这个错误，并且不明白为什么转换不起作用（给未来的我的提示）。