# web-antd

**Repository Path**: zhoubichuan/web-antd

## Basic Information

- **Project Name**: web-antd
- **Description**: 使用antdesign二次封装，个性化配置【http://zhoubichuan.com/web-antd】
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://zhoubichuan.gitee.io/web-antd
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2022-12-14
- **Last Updated**: 2023-02-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# myselfantd

基本 antd 4.0 二次封装的业务组件库。

## 1.使用方法

### 1.1 安装

以 yarn 为例

```sh
yarn add myselfantd
```

### 1.2 使用

1、 使用包内的 `ConfigProvider` 组件对应用根节点组件进行包裹，修改全局组件命名空间为 `myselfantd`

index.js

```js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { ConfigProvider } from 'myselfantd'

ReactDOM.render(
  <ConfigProvider>
    <App />
  </ConfigProvider>,
  document.querySelect('#root')
)
```

2、这样引入组件即可，会按需加载基于 antd 定制过的组件

```js
import React from 'react'
import { Button } from 'myselfantd'

export default () => {
  return <Button type="primary">点我</Button>
}
```

3、此外 `myselfantd` 必须全量引入定制过的 `antd` 样式。

```js
import 'myselfantd/esm/styles/index.css'
```

PS：如果项目中已经有 antd 3.x 版本，请引入 myselfantd 所有组件样式。

```js
import 'myselfantd/esm/styles/styleWithoutGlobal.css'
```

譬如在 umi 项目中使用，定位 global 入口

```js
import React from 'react'
import { Button, ConfigProvider } from 'myselfantd'
// + import 'myselfantd/esm/styles/index.css'

export default function IndexPage() {
  return (
    <ConfigProvider>
      <h1>Page index</h1>
      <Button type="primary">button</Button>
    </ConfigProvider>
  )
}
```