React.js中添加图标：material-ui/core已废弃，CodeSandbox环境下该如何操作？

• 替换废弃依赖
  @material-ui/core已停止维护，官方当前推荐使用MUI套件。在CodeSandbox的依赖面板中操作：

  1. 若已添加@material-ui/core，搜索并移除该包
  2. 搜索添加@mui/material（核心组件库）和@mui/icons-material（图标库）

• 在App.jsx中使用图标
  导入路径切换为新包，示例代码如下：

  import { Button } from '@mui/material';
  import AddCircleIcon from '@mui/icons-material/AddCircle';
  
  function App() {
    return (
      <div>
        {/* 搭配按钮使用图标 */}
        <Button variant="contained" startIcon={<AddCircleIcon />}>
          添加
        </Button>
        {/* 单独使用图标 */}
        <AddCircleIcon color="primary" fontSize="large" />
      </div>
    );
  }
  
  export default App;
  

• 额外说明

  • 原@material-ui/core中的组件也需要迁移到@mui/material，API基本兼容，部分细节可参考官方迁移指引
  • @mui/icons-material涵盖所有Material Design图标，直接按图标名称导入即可

内容的提问来源于stack exchange，提问作者GUNGUN PANCHAL