CODEWITHSUNDEEP
reactjsmaterial-ui
Kiki
Kiki

Reputation: 499

How to import material-ui components?

Heavily using material-ui in my app, is there a way to avoid doing imports in each app component like this? 

import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";
import Grid from "@material-ui/core/Grid";
import Container from "@material-ui/core/Container"; 
....

or this:

import {Typography, Box, Grid, Container} from "@material-ui/core";

Is there such thing like this? So that I don't need to import each component?

import * from "@material-ui/core"

Thanks in advance! :D

Upvotes: 4

Views: 19365

Answers (3)

Hamidreza Soltani
Hamidreza Soltani

Reputation: 624

The first option is not much clean from an import statement perspective, especially when you want to import and use a lot of Mui components, but as you use path imports to avoid pulling in unused modules, gets an optimized bundle size automatically.

The second option (import * from "@material-ui/core"), on the other hand, is the most convenient from a development perspective, and also makes you have a clean import statement, but will make your application packages larger than they import each component separately depending on what part of components you are using. Moreover, there is a large scale application you need to import from different sources of Material-ui:

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

A better optimized approach, is to create a single file in your project where you import each component that you use individually, then export them all under a single namespace:

// src/mui/index.js
export { default as MenuItem } from '@material-ui/core/MenuItem';
export { default as TextField } from '@material-ui/core/TextField';
export { default as Select } from '@material-ui/core/Select';
export { default as ClearIcon} from '@material-ui/icons/Clear';
export { default as FormControl } from '@material-ui/core/FormControl';
export { default as Button } from '@mui/material/Button';
...

Then you can import that file wholesale into each component where you need it:

// ../../MyComponent.js
import {
  MenuItem,
  TextField,
  Select,
  ClearIcon,
  FormControl
} from 'mui';

Now you have a clean import statement and optimized bundle size as well.

Working with absolute path: I never address components with a relative path (e.i ../../../mui). you can take a look here if you don't know how to use absolute path in React.

Upvotes: 3

Remolten
Remolten

Reputation: 2682

Yes, there is an import all in JavaScript. You can do it like so:

import * as Mui from '@material-ui/core';

This puts all of the named exports of @material-ui/core into the Mui "namespace". Then, you can easily access any of the components i.e.:

<Mui.Typography>Test</Mui.Typography>

You can read more about import here.

Upvotes: 4

Khabir
Khabir

Reputation: 5862

Hi you can do this in following way:

  1. create a folder called collections
  2. create a file called index.js under collections folder
  3. write the following code in index.js

export {default as Button} from "@material-ui/core/Button";

export {default as Card} from "@material-ui/core/Card";

export {default as Paper} from "@material-ui/core/Paper";

  1. now import collection like bellow:

import * as collections from './collections';

Your component file will be as:

import React, {Component} from "react";
import * as collections from './collections';

class Box extends Component {
    render() {
        return (
            <div>
                <collections.Button>
                    Test
                </collections.Button>
                <collections.Card>test</collections.Card>
                <collections.Paper>test</collections.Paper>
            </div>
        );
    }
}
export default Box;

Upvotes: 0

Related Questions