5.2 button：组件渲染

开发任何一个组件时，都要用CSS样式将组件渲染出来，以便于在examples演示包中呈现渲染效果。渲染组件有个至关重要的过程，就是“由简至繁”，将最基础的效果先呈现出来，再通过“CSS组合”的方式使组件变得越来越复杂。

根据UI组件库设计稿中的“基础按钮/basis”类型，分别有5种类型的主题：默认、主要、成功、警告和错误，而“默认”类型按钮是最基础的，另外4种按钮效果则是在“默认”按钮的基础上增加了不同的主题颜色，这就是“由简至繁”的演变。因此根据UI组件库button组件的“尺寸标注”示意图先渲染“默认”类型的按钮，如代码清单所示。

> packages/theme/src/button.scss
.a-button {
  display: inline-flex;         // 盒模型，弹性布局
  align-items: center;          // 子元素垂直居中
  justify-content: center;      // 子元素水平居中
  height: 32px;                 // 高度
  min-width: 80px;              // 最小宽度
  padding: 0 16px;              // 内边距为16px
  background-color: #fff;       // 默认白色背景
  border-radius: 12px;          // 圆角
  border: 2px solid #e3e5f1;    // 1像素，实线边框
  box-sizing: border-box;       // 忽略padding和border的计算
  line-height: 1;               // 根据该元素本身的字体大小设置行高
  color: #4e5158;               // 文字颜色
  font-size: 14px;              // 字体大小
  text-align: center;           // 文字居中
  white-space:nowrap;           // 不换行
  transition: .3s;              // 300毫秒过滤 
  outline: none;                // 去除外轮廓
  cursor: pointer;              // 鼠标指针变为“手”
  user-select: none;            // 禁止选中文本内容
  vertical-align: middle;       // 当前元素的垂直中心点和父元素的基线往上
  span {
    line-height: 1;             // 根据该元素本身的字体大小设置行高
    display: inline-flex;       // 盒模型，弹性布局
    align-items: center;        // 子元素垂直居中
  }
}

上述代码清单的classname类名.a-button是通过useNamespace函数中的b方法生成，定义样式时使用.a-button即可。重点要注意的是，UI组件库设计稿的组件设计多数是有“边框”和“背景色”，如input组件、checkbox组件、radio组件等。因此在书写CSS样式时，使两者的属性分开，这样方便处理“边框类型”按钮，渲染效果如图所示。