在 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 相同（这是一个技术术语，如果您想了解更多信息，请在谷歌上搜索）。 如果您使用现代框架，如 Create React App、Next.JS、Gatsby 等。那么它们已经支持开箱即用的 tree-shaking，选择纯粹是偏好。

Answer 2

导入像@mui/material/Button这样的单个组件会减少整体包的大小。 您不需要导入整个库，只需要导入所需的组件。

这是一个很好的资源