Can we make the import shorter for material-ui components?

Question

Is there a way to shortcut all this import into one?

I'm new to react but I always notice everything must be imported especially using CSS components.

Can you give me an idea how to shorten this?

import { withStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import Fab from '@material-ui/core/Fab';
import NavigationIcon from '@material-ui/icons/Navigation';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import AccountCircle from '@material-ui/icons/AccountCircle';
import InputAdornment from '@material-ui/core/InputAdornment';

Answer 1

You can convert your existing codebase to this option with material-ui top-level-imports codemod

Converts all @material-ui/core submodule imports to the root module

Install

npm install -D @material-ui/codemod

Script

find src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v4.0.0/top-level-imports.js

Result

import {
  Button,
  Dialog,
  ...
} from '@material-ui/core';

---

Refer to the document minimizing-bundle-size