What is the difference between the different ways of importing material-ui components?

From reading the material-ui documentation and online examples, there seem to be different ways of importing the same item:

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

What is the difference between the different way of doing an import?

Answer

The main difference occurs when bundling. Using the named import:

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

pulls in the entire @material-ui/core module. That means you bundle everything in the module (and all of the dependencies). And there are a lot of components in core.

Importing:

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

Only pulls in TextField component (and its dependencies)

I would guess that other paths where TextField can be found (like material-ui/TextField) are for backwards compatibility with previous versions of the library.