reactjs - styled-components 条件动画性能问题

Question

我已经玩styled-components了几天和条件渲染了，我注意到一些动画滞后，因为这个我不确定它是否真的与styled-components其他东西有关，或者这是我的按钮组件，你能检查一下这些检查吗太重了？或者我还有其他影响性能的东西吗？

export const StyledButton = styled.button`
  cursor: pointer;
  border-radius: ${borderRadius};
  outline: none;

  // inputs: color, outlined

  // default
  border: 1px solid transparent;
  color: ${({ theme, color }) => !color && theme.buttonText};
  background-color: ${({ theme, color }) => !color && theme.buttonBackground};

  // regular
  color: ${({ color, outlined }) => !outlined && color && colors.white};
  background-color: ${({ color, outlined }) => !outlined && color};

  // outlined
  color: ${({ color, outlined }) => outlined && color};
  background-color: ${({ color, outlined }) => outlined && color && `transparent`};

  border-color: ${({ color }) => color};
  transition: background-color 350ms linear, color 350ms linear;

  svg {
    transition: stroke 350ms linear;
    // default
    stroke: ${({ theme, color }) => !color && theme.buttonText};
    // regular
    stroke: ${({ color, outlined }) => !outlined && color && colors.white};
    // outlined
    stroke: ${({ color, outlined }) => outlined && color};
  }

  * > * {
    transition: color 350ms linear;
    // default
    color: ${({ theme, color }) => !color && theme.buttonText};
    // regular
    color: ${({ color, outlined }) => !outlined && color && colors.white};
    // outlined
    color: ${({ color, outlined }) => outlined && color};
  }

  &:hover {
    // default
    color: ${({ theme, color }) => !color && theme.buttonBackground};
    background-color: ${({ theme, color }) => !color && theme.buttonText};

    // regular
    color: ${({ color, outlined }) => !outlined && color};
    background-color: ${({ color, outlined }) => !outlined && color && "transparent"};

    // outlined
    color: ${({ color, outlined }) => outlined && color && colors.white};
    background-color: ${({ color, outlined }) => outlined && color};

    svg {
      // default
      stroke: ${({ theme, color }) => !color && theme.buttonBackground};
      // regular
      stroke: ${({ color, outlined }) => !outlined && color};
      // outlined
      stroke: ${({ color, outlined }) => outlined && color && colors.white};
    }

    * > * {
      // default
      color: ${({ theme, color }) => !color && theme.buttonBackground};
      // regular
      color: ${({ color, outlined }) => !outlined && color};
      // outlined
      color: ${({ color, outlined }) => outlined && color && colors.white};
    }
  }
`;

标签： reactjsnext.jsstyled-components