react使用Ant Design

加油乐2026-01-09 12:05

一、安装

官网：Ant Design
npm

css 复制代码

npm install antd --save

yarn

csharp 复制代码

yarn add antd

pnpm

css 复制代码

pnpm install antd --save

二、main引用

引入Ant Design的reset.css文件
引入ConfigProvider全局配置，且包含所有组件
设置locale属性为中文

javascript 复制代码

// 导入严格模式组件，用于开发环境下检测潜在问题
import { StrictMode } from 'react';
// 导入客户端渲染方法，用于创建根节点并渲染应用
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
// 导入Ant Design的样式文件
import 'antd/dist/reset.css';
// 导入全局自定义样式文件
import './index.css';
// 导入Ant Design配置提供者组件
import { ConfigProvider } from 'antd';
// 导入Ant Design的中文语言包
import zhCN from 'antd/locale/zh_CN';

// 获取 HTML 中 id 为 'root' 的 DOM 元素作为应用根节点
const rootElement = document.getElementById('root');

// 如果找不到根节点，则抛出错误
if (!rootElement) {
	throw new Error('找不到id为"root"的DOM元素，请检查index.html文件');
}

// 创建 React 根节点
const root = createRoot(rootElement);

// 渲染整个 React 应用
root.render(
	// 使用严格模式包装应用
	// 注意：严格模式只在开发环境生效，生产环境会自动禁用
	<StrictMode>
		{/*
		 ConfigProvider 是 Ant Design 的全局配置组件
		 此处设置 locale 属性为中文语言包，实现组件国际化
		 可以在这里添加更多全局配置，如主题定制等
		 */}
		<ConfigProvider locale={zhCN}>
			{/*
			 应用主组件
			 所有页面和路由都将在 App 组件内部定义和管理
			 */}
			<App />
		</ConfigProvider>
	</StrictMode>
);

三、组件引用

引用Button，查看使用效果

javascript 复制代码

import { Button } from 'antd';

function App() {
	return (
		<div>
			<Button type="primary">按钮</Button>
		</div>
	);
}

export default App;