Importing only one component from Material UI

Question

need a Stepper component from somewhere and the only adequate one I found was the MUI one. But my app uses react-bootstrap and I don't have it. In this post (Is it possible to install a package that contains only one component of Material-UI? ) the guys have given a package where you can import only the component you need, but for some reason I am required to do npm config set '@bit:registry' https://node.bit.dev which I am not okay with since I want everyone to be able to just do an npm install without additional configuration. Is there a workaround around that and is it actually okay to install the whole MUI kit and import just the Stepper ?

Delight

Answer 1

If you're using ES6 modules and a bundler that supports tree-shaking (webpack >= 2.x, parcel with a flag) you can safely use named imports and still get an optimised bundle size automatically.

You can use path imports to avoid pulling in unused modules. For instance, use:

import Stepper from '@material-ui/core/Stepper';

instead of

import { Stepper } from '@material-ui/core';

Read more about minimizing bundle size here

---

Please, let me know if it works or not )

Cadent