react styled components button that flips over and inverts colors when hovered in typescript

import React from 'react';
import styled from 'styled-components';

interface ButtonProps { 
  invertColors: boolean;
}

const Button = styled.button<ButtonProps>`
  background-color: ${props => props.invertColors ? 'white' : 'blue'};
  color: ${props => props.invertColors ? 'blue' : 'white'};
  transform: ${props => props.invertColors ? 'rotateY(180deg)' : 'rotateY(0)'};
  transition: all 0.2s ease-in-out;
  
  &:hover {
    background-color: ${props => props.invertColors ? 'blue' : 'white'};
    color: ${props => props.invertColors ? 'white' : 'blue'};
    transform: ${props => props.invertColors ? 'rotateY(0)' : 'rotateY(180deg)'};
  } 
`;

const FlippingButton: React.FC<ButtonProps> = ({ invertColors, children, ...rest }) => (
  <Button invertColors={invertColors} {...rest}>
    {children}
  </Button>
);

export default FlippingButton;
852 chars
28 lines