在 ReactJS 中导入 MUI 组件

Question

如您所知，导入 MUI 组件有两种方法。例如：

import Button from '@mui/material/Button';
// or
import { Button } from '@mui/material';

所以我的问题是：我应该使用哪种方式？他们之间有什么区别吗？

Answer 1

我会简短地说。

选项1

import Button from '@mui/material/Button';

您可以在任何场景中使用它。捆绑器只会将Button组件捆绑到您的构建文件中，而不是整个 MUI 库。

选项2

import { Button } from '@mui/material';

当且仅当您的捆绑程序支持 tree-shaking 时与选项 1 相同（这是一个技术术语，如果您想了解更多信息，请在 google 上搜索）。如果您使用的是 Create React App、Next.JS、Gatsby 等现代框架，那么它们已经支持开箱即用的 tree-shaking，选择纯粹是偏好。