故事前景:之前没有封装过公共组件到某个组件库的经验,此次是从零开始,我尽量写的详细一些,开始还抱着一些担忧,后来发现这个就像我们平时写业务一样,不是很难,难的是封装的组件做到让别人挑剔不起来。
好了,话不多说,咱们开始今天的话题。
开始之前有些什么:有一个老大搭建好的组件库项目,是用的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 ===