CODEWITHSUNDEEP
reactjsmaterial-ui
LXT
LXT

Reputation: 855

Importing MUI Component in ReactJS

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?

Upvotes: 5

Views: 3651

Answers (2)

Matthew Kwong
Matthew Kwong

Reputation: 2957

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.

Upvotes: 7

Authentic Science
Authentic Science

Reputation: 848

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

Upvotes: 1

Related Questions