tntd

组件介绍

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

如何从 tntd v1.0 迁移到 tntd v2.0

安装 tntd 最新版本

npm install tntd

更改配置

1. 添加 .babelrc 中的 import 插件配置，实现按需引入

+  [
+    "import",
+    {
+      "libraryName": "tntd",
+      libraryDirectory: 'es',
+    },
+    "tntd"
+  ],

2. 更改 webpack.config.js 中的主题配置

{
  loader: "less-loader",
  options: {
    javascriptEnabled: true,
    ...
    modifyVars: {
-      hack: "true; @import \"~@tntd/antd-cover/tnt.less\";"
+      hack: "true; @import \"~tntd/themes/default/variables.less\";"
    }
  }
}

3. 修改导入名称

Layout, Icon, Select 等 tntd 1.0 组件和 antd 组件名称存在冲突，请按下方例子进行重命名：

- import { Layout, Icon, Select } from 'tntd'
+ import { TntdLayout, TntdIcon, TntdSelect } from 'tntd'

4. 更改配置

// 使用全新的空状态插画
import { renderEmpty } from 'tntd'
// 使用内置语言包替换 antd
// 英文语言包
const enUS = import 'tntd/es/locale/en_US'
// 中文语言包
const zhCN = import 'tntd/es/locale/zh_CN'

export const App = () => {
  return (
    // 使用空状态插画及语言包
    <ConfigProvider locale={zhCN} renderEmpty={renderEmpty}>
      ...
    </ConfigProvider>
  )
}