Importing MUI Component in ReactJS

Question

As you know, there are 2 ways to import MUI component. For example:

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

So my question is: Which way should I use? And any differences between them?

Here you go:https://stackoverflow.com/questions/56447187/is-there-a-difference-between-these-two-material-ui-import-methods — gretal, Nov 26 '21 at 01:56

score 5 · Accepted Answer · edited Feb 02 '22 at 09:11

5

I will make it short.

Option 1

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

You can use this in any scenario. The bundler will only bundle the Button component to your build files instead of the entire MUI library.

Option 2

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

Same as Option 1 IF AND ONLY IF your bundler supports tree-shaking (this is a technical term, google this if you want to know more). If you are using modern frameworks like Create React App, Next.JS, Gatsby, etc. Then they already support tree-shaking out of the box and the choice is purely preference.

edited Feb 02 '22 at 09:11

Ferran Buireu

28,630
6
39
67

answered Nov 26 '21 at 08:28

Matthew Kwong

2,548
2
11
22

I use this in React app, so does react support tree-shaking? – LXT Nov 26 '21 at 08:43
@LXT With what framework? Create React App? There are a lot of ways to create an React application. – Matthew Kwong Nov 26 '21 at 09:09
yes, I use create-react-app to create a React app – LXT Nov 27 '21 at 01:32
@LXT, then you are free to choose any syntax you like. `create-react-app` supports tree-shaking out of the box (unless you are using a very old version of CRA, which is unlikely). – Matthew Kwong Nov 30 '21 at 01:14
I got it, thanks for your support – LXT Nov 30 '21 at 03:09

score 1 · Answer 2 · answered Nov 26 '21 at 01:58

1

Importing individual components like @mui/material/Button reduces the overall bundle size. You don't need to import the whole library, just desired components.

Here is a good resource

answered Nov 26 '21 at 01:58

Authentic Science

838
1
3
5

Yes and no. Your answer is partially correct. Named import will not import the whole library if the bundler support tree shaking. – Matthew Kwong Nov 26 '21 at 08:24
True..Assuming developer has configured webpack for tree shaking, and then again building in production mode and/or using webpack 5+. – Authentic Science Nov 26 '21 at 08:41

Importing MUI Component in ReactJS

2 Answers2