使用react搭建组件库(三)——组件库的搭建

1. 使用命令安装初始化： npx create-react-app myUI --typescript 

2. 组件库使用eslint，

新建 .vscode/settings.json 文件

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
  ]
}

设置scss文件：src/styles/_variable.scss 文件：

 

$white: #fff !default;

!default是用来指定变量默认值的，如果在此之前变量已经赋值，那就不使用默认值，如果没有赋值，则使用默认值。

然后定义色彩：

$blue: #0d6efd !default;

设置系统色：

$primary: $blue !default;

新建scss的入口文件：

src/styles/index.scss

```scss

// config

@import "variables";

//layout

@import "reboot";

```

注意 _variables 和 _reboot 两个文件以下划线开头，这个是告诉scss编译器，这个scss的模块，

无法直接使用，只能 @import 引入。

 

在组件中使用 classname： https://github.com/jedWatson/classnames

 

npm install classnames -D

npm install @types/classnames -D

 

如果对象的key值是变化的，可以采用下面的中括号的形式：[`btn-${btnType}`]

1 // btn, btn-lg, btn-primary
2 const classes = classNames('btn', className, {
3     [`btn-${btnType}`]: btnType,
4     [`btn-${size}`]: size,
5     'disabled': (btnType === 'link') && disabled
6 })