课程名称：2022升级 React18+TS高仿AntD从零到一打造组件库

课程章节： 第4章 组件库起航 - 你真的能写的好看起来简单的 Button 组件吗？

主讲老师：张轩

课程内容：

今天学习的内容包括：

4-6 初次亮相 - 添加 normalize.css
4-7 Button 组件需求分析

课程收获：

normalize

https://github.com/necolas/normalize.css/

1 保护浏览器有用的默认样式

2 为大部分html元素提供一般化样式

3 修复浏览器自身的bug并保证浏览器的一致性

4 优化css的可用性

5 详尽的注释

normalize.css 深奥部分的附加细节和解释。

pre, code, kbd, samp

该font-family: monospace, monospacehack 修复了预格式化文本的字体大小的继承和缩放。的重复monospace是故意的。来源。

sub, sup

通常，使用sub或sup影响所有浏览器中文本的行框高度。来源。

select

默认情况下 select，除非设置了边框属性，否则 OS X 上的 Chrome 和 OS X 上的 Safari 允许非常有限的样式。optgroup 在 OSX 上的 Chrome 和 OS X 上的 Safari 中无法安全地更改元素的默认字体粗细。

[type=“checkbox”]

建议您不要设置复选框和单选输入的样式，因为 Firefox 的实现不考虑 box-sizing、padding 或 width。

[type=“number”]

应用于数字输入的某些字体大小值会导致递减按钮的光标样式从default变为text。

[type=“search”]

默认情况下，搜索输入不是完全可样式化的。在 OSX/iOS 上的 Chrome 和 Safari 中，您无法控制font、padding、border或background. 在 Windows 上的 Chrome 和 Safari 中，您无法border正确控制。它将适用 border-width，但只会显示该边框外部 1px 的边框颜色（无法控制）。应用-webkit-appearance: textfield 解决了这些问题，而不会消除搜索输入的好处（例如显示过去的搜索）。

组件库的变量分类：
色彩，字体，表单，阴影，按钮，可配置开关

字体的选择：

字体的大小

字体的自重

行高

函数：darken($link-color,15%) !default

rem em

![](https://img1.sycdn.imooc.com//szimg/5e7463e30001bf8519201080.jpg)

以下划线开头的只能被导入不能被编译
![](https://img1.sycdn.imooc.com//szimg/5e7464520001e0cc19201080.jpg)

Button组件的使用方法（组件完成后，我们希望用什么方式让user使用）

![](https://img1.sycdn.imooc.com//szimg/60b180b10001060319201080.jpg)