styled-components实现 CSS in JS

伪类选择器（:hover/:focus等）

使用 styled-components 可以实现CSS中:hover,:focus,:active等效果

const ImgUrl = styled.a`
  font-size: 12px;

  &:hover {
    color: #42b983;
  }
`;

动画 @keyframe

使用 styled-components 同样可以实现 CSS动画 @keyframe

const change= keyframes`
  0%{
    width:100px;
  }
  50% {
    width:30px;
  }
 100%{
    width:70px;
  } 
`;
const ShowAnimation = styled.div`
   width:100px;
   height:100px;

  &:hover {
    animation: ${change} 2s linear infinite;
  }
`;