阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    Ant Design 在 TypeScript 中使用

    初始化

    使用 create-react-app 一步步地创建一个 TypeScript 项目,并引入 antd

    antd 基于最新稳定版本的 TypeScript,请确保项目中使用匹配的版本。

    新项目

    npx create-react-app my-app --template typescript
    

    添加到已有项目

    npm install --save typescript @types/node @types/react @types/react-dom @types/jest
    

    引入 antd

    $ npm install antd
    $ yarn add antd
    

    使用

    修改 src/App.tsx,引入 antd 的按钮组件。

    import React, { FC } from 'react';
    import { Button } from 'antd';
    import './App.css';
    
    const App: FC = () => (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
    
    export default App;
    

    修改 src/App.css,在文件顶部引入 antd 的样式。

    @import '~antd/dist/antd.css';
    

    重新启动 yarn start,现在你应该能看到页面上已经有了 antd 的蓝色按钮组件,接下来就可以继续选用其他组件开发应用了。

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录