reactjs - 在 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';

您可以在任何情况下使用它。 bundler 只会将 Button 组件捆绑到您的构建文件，而不是整个 MUI 库。

选项 2

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

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