antd的基本使用
Posted 劳埃德·福杰
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了antd的基本使用相关的知识，希望对你有一定的参考价值。
antd全称Ant Design，是蚂蚁金服开发的一套React UI组件库。
1.基本使用
npx create-react-app antd-demo // 初始化项目
cd antd-demo
npm i antd/public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>react脚手架</title>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
</head>
<body>
<div id="root"></div>
</body>
</html>/src/App.jsx
import React, Component from 'react'
import Button from 'antd';
import 'antd/dist/antd.min.css';
export default class App extends Component
render()
return (
<div>
<Button type="primary">Primary Button</Button>
</div>
)
/src/index.js
import React from 'react'
import createRoot from 'react-dom/client'
import App from './App' //引入App
const container = document.getElementById('root');
const root = createRoot(container);
root.render(
<App/>
)
2.自定义主题
antd默认整体的色调是蓝色，想要修改就需要额外配置。
/public/index.html文件和上面一样，不变。
①安装依赖
npm i @craco/craco craco-less②修改package.json
....
"scripts":
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
....③在项目根目录下添加craco.config.js文件
const CracoLessPlugin = require('craco-less');
module.exports =
plugins: [
plugin: CracoLessPlugin,
options:
lessLoaderOptions:
lessOptions:
modifyVars: '@primary-color': '#1DA57A' ,
javascriptEnabled: true,
,
,
,
,
],
;④其它要修改的文件
/src/App.jsx
import React, Component from 'react'
import Button from 'antd';
import 'antd/dist/antd.less';
export default class App extends Component
render()
return (
<div>
<Button type="primary">Primary Button</Button>
</div>
)
/src/index.js
import React from 'react'
import createRoot from 'react-dom/client'
import App from './App' //引入App
const container = document.getElementById('root');
const root = createRoot(container);
root.render(
<App/>
)
以上是关于antd的基本使用的主要内容，如果未能解决你的问题，请参考以下文章
ReactJS 结合 antd-mobile 开发 h5 应用基本配置