从零构建自己的React组件库（零）今天开始，为了自己更好的学习，我决定构建一个自己的组件库，当然也不可能完全自己写，部

今天开始，为了自己更好的学习，我决定构建一个自己的组件库，当然也不可能完全自己写，部分东西会借鉴当前做的比较好的组件库——antd。读书人嘛，借鉴不是抄 🤣 🤣 🤣

一、取名

首先先给未来的组件库进行取名 moon-ui 🌕。

二、确定实现技术

选用 React + TypeScript 作为技术实现方向。

三、项目创建

项目直接使用create-react-app来创建，因为要支持 typescript，所以后面加上 --template typescript

// yarn
yarn create react-app --template typescript

// npx
npx create-react-app --template typescript

四、样式重置

众所周知不同浏览器的标签都会有自己不同的默认样式，作为组件库首先要做的就是先将这些不同的默认样式进行统一。在src目录下创建/styles/_reboot.scss，其实就是 normalize.css ，接着在/styles/index.scss引入_reboot.scss。

// src/styles/index.scss
@import 'reboot' // 并不是写错了！

在 src/index.tsx引入import './styles/index.scss';

五、主要常用样式变量定义

// src/styles/_variables.scss

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;


$blue: 		 #1890ff !default;
$indigo: 	 #6610f2 !default;
$purple: 	 #7e1671 !default;
$pink:     #e83e8c !default;
$red: 		 #e3342f !default;
$orange:	 #f6993f !default;
$yellow:	 #f1c40f !default;
$green: 	 #38c172 !default;
$teal: 		 #4dc0b5 !default;
$cyan: 		 #6cb2eb !default;

$primary: 	 $blue !default;
$secondary:	 $gray-600 !default;
$success: 	 $green !default;
$info: 		 	 $cyan !default;
$warning: 	 $yellow !default;
$danger: 	 	 $red !default;
$light: 	 	 $gray-100 !default;
$dark: 	 	 	 $gray-800 !default;

// 无衬线字体（最佳解决方案）
$font-family-sans-serif:      	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
// 等款字体（第二个选择）
$font-family-monospace:       	SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base:            	$font-family-sans-serif !default;

// 字体大小
$font-size-base:								1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg:									$font-size-base * 1.25 !default;
$font-size-sm:									$font-size-base * 0.875 !default;

// 字重
$font-weight-lighter:						lighter !default;
$font-weight-light:							300 !default;
$font-weight-normal:						400 !default;
$font-weight-bold:							700 !default;
$font-weight-bolder:						bolder !default;
$font-weight-base:							$font-weight-normal !default;

// 行高
$line-height-base:							1.5 !default;
$line-height-lg:								2 !default;
$line-height-sm:								1.5 !default;

// 标题大小
$h1-font-size:									$font-size-base * 2.5 !default;
$h2-font-size:									$font-size-base * 2 !default;
$h3-font-size:									$font-size-base * 1.75 !default;
$h4-font-size:									$font-size-base * 1.5 !default;
$h5-font-size:									$font-size-base * 1.25 !default;
$h6-font-size:									$font-size-base !default;

// 链接
$link-color:										$primary !default;
$link-decoration:								none !default;
$link-hover-color:							darken($link-color, 15%) !default;
$link-hover-decoration:					underline !default;

// body
$body-bg:												$white !default;
$body-color:										$gray-900 !default;
$body-text-align:								null !default;

同样在src/styles/index.scss中引入

// src/styles/index.scss

// config
@import 'variables';

// layout
@import 'reboot';