styled-components的简单使用方法

安装

yarn add styled-components

创建样式组件

import styled from 'styled-components';

const Button = styled.span`

  padding: 5px 10px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;

  background-color: ${props => props.visited ? '#d7d7d7' : '#f00' };
`;

使用样式组件

<Button visited>删除</Button>

当visited变化时，背景条件渲染

效果