React项目中使用手绘风格UI组件Wired Elements

好消息！！！有封装好的库！！！直接点击链接看文档，不用看后面了

react-wired-elements

一 wired-elements

1. 一个很有特色的手绘风格的UI组件库
2. 点击跳转至文档
3. 点击跳转至github，点击组件源码，即可看到每个组件具体的用法。

二 以wired-button为例，在react项目中使用wired-elements

不能直接引用，需将wired-button封装成一个react组件

1. 安装

  yarn add wired-elements

2. 封装WButton组件

  import React from 'react';
  import 'wired-elements';
  
  const buttonStyles={
    //根据需要自定义css样式
  }
  const WButton = (props) => (
      <wired-button style={buttonStyles} class={props.className}>{props.content}</wired-button>
  );

  export {WButton}

3. 使用

  <WButton className='active' content="支出" />
  <WButton content="收入" />

4. 效果