如何导入material-ui元器件？

Question

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

Answer 1

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 ie:

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

You can read more about import here .

Answer 2

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 (ei./../../mui). you can take a look here if you don't know how to use absolute path in React.

Answer 3

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";

4. 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;