前端组件库实战：告别重复造轮子，提升开发效率

这里要注意，引入 antd/dist/reset.css 是为了重置默认样式，避免与项目全局样式冲突。实际运行时，你会发现表单验证、弹窗交互这些细节都被封装好了，省去了大量胶水代码。

2. Material UI：设计驱动

如果你的产品更偏向 C 端应用，追求 Material Design 风格，Material UI 是不错的选择。它基于 React Hooks，API 设计非常现代。

// 安装依赖：npm install @mui/material @emotion/react @emotion/styled
import React from 'react';
import {
  Button, TextField, Card, CardContent, Table,
  TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Modal, Box
} from '@mui/material';

function App() {
  const [isModalVisible, setIsModalVisible] = React.useState(false);
  const [name, setName] = React.useState('');
  const [age, setAge] = React.useState('');

  const handleClose = () => setIsModalVisible(false);
  const handleSubmit = () => {
    console.log('提交:', { name, age });
    setIsModalVisible(false);
  };

  const rows = [
    { id: 1, name: '张三', age: 32 },
    { id: 2, name: '李四', age: 42 }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <Card sx={{ mb: 2 }}>
        <CardContent>
          <Button variant="contained" color="primary" onClick={() => setIsModalVisible(true)} sx={{ mb: 2 }}>
            添加用户
          </Button>
          <TableContainer component={Paper}>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell>姓名</TableCell>
                  <TableCell>年龄</TableCell>
                  <TableCell>操作</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {rows.map((row) => (
                  <TableRow key={row.id}>
                    <TableCell>{row.name}
                    {row.age}
                    
                      编辑
                    
                  
                ))}
              
            
          
        
      
      
        
          添加用户
           setName(e.target.value)} />
           setAge(e.target.value)} />
          
            取消
            提交
          
        
      
    
  );
}

export default App;

MUI 的 sx prop 让你可以直接写 CSS-in-JS，灵活性很高，但要注意性能问题，避免在循环中创建内联对象。

3. Tailwind CSS + Shadcn UI：灵活定制

现在越来越多的团队喜欢用原子化 CSS。Tailwind 配合 Shadcn UI，既能享受工具类的便利，又能完全控制组件源码。

// 安装依赖：npm install -D tailwindcss postcss autoprefixer && npx shadcn@latest init
import React from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableRow } from '@/components/ui/table';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';

function App() {
  const rows = [
    { id: 1, name: '张三', age: 32 },
    { id: 2, name: '李四', age: 42 }
  ];

  return (
    <div className="p-4">
      <Card className="mb-4">
        <CardHeader>
          <CardTitle>用户管理</CardTitle>
        </CardHeader>
        <CardContent>
          <Dialog>
            <DialogTrigger asChild>
              <Button className="mb-4">添加用户</Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-md">
              <DialogHeader>
                <DialogTitle>添加用户</DialogTitle>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                <div className="grid gap-2">
                  <Label htmlFor="name">姓名</Label>
                  <Input placeholder= />
                
                
                  年龄
                  
                
              
              
                取消
                提交
              
            
          
          
            
              
                
                  姓名
                  年龄
                  操作
                
              
              
                {rows.map((row) => (
                  
                    {row.name}
                    {row.age}
                    
                      编辑
                    
                  
                ))}
              
            
          
        
      
    
  );
}

export default App;

这套组合拳的优势在于组件源码是复制到你项目里的，你可以随意修改底层逻辑，同时享受 Tailwind 带来的样式一致性。不过前期配置稍微繁琐一点，需要初始化一下环境。

总结

选择组件库不是为了偷懒，而是为了把精力集中在业务核心上。统一的样式规范、丰富的交互细节、完善的无障碍支持，这些都是成熟库经过千锤百炼的成果。别再手动造轮子了，让工具为你服务。