小白之封装第一个组件到组件库的过程（超详细的经验）

故事前景：之前没有封装过公共组件到某个组件库的经验，此次是从零开始，我尽量写的详细一些，开始还抱着一些担忧，后来发现这个就像我们平时写业务一样，不是很难，难的是封装的组件做到让别人挑剔不起来。

好了，话不多说，咱们开始今天的话题。

开始之前有些什么：有一个老大搭建好的组件库项目，是用的storybook去搭建的，下面我把老大搭建的框架用到的开发依赖跟生产依赖截图出来

![在这里插入图片描述](https://img-blog.csdnimg.cn/06b9126d1c7945ce8b92b08a87a5612e.png#pic_center

然后项目的目录

然后这些是开始就有的
然后有同事已经在她的分支上封装好了一个组件，input组件，我参考了一下她的封装，并且我封装的Button组件有大致给出业务场景，还有设计文档，我截图出来


就这样，带着实现这些功能的目的我开始了组件封装

我就是引用组件的方式，来传参实现控制这些功能就算完成任务，下面来分享一下我写的代码，小二，上代码~

import React, { useState } from "react";

import styled, { css } from "styled-components";

import { rem } from "@utils/UtilsFunc";

const Wrapper = styled.button`

  width: ${(props) => (props.isInline === true ? "" : rem(250))};

  height: ${(props) => (props.size === "small" ? rem(28) : rem(40))};

  margin: 0 auto;

  border: none;

  font-size: 16px;

  color: #ffffff;

  border-radius: ${rem(4)};

  background-color: #ff5b5b;

  padding: 0 ${rem(16)};

  ${(props) =>

    props.shape &&

    css`

      border-radius: ${props.shape ===