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?
Davin Tryon :
The main difference occurs when bundling. Using the named import:\n\nimport { TextField } from '@material-ui/core';\n\n\npulls 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.\n\nImporting:\n\nimport TextField from '@material-ui/core/TextField';\n\n\nOnly pulls in TextField component (and its dependencies)\n\nI would guess that other paths where TextField can be found (like material-ui/TextField) are for backwards compatibility with previous versions of the library.",
2019-10-17T10:00:19
octobus :
It is because they are exported differently when you export default TextField you can import TextFields like this,\n\nimport TextField from '@material-ui/core/TextField';\nBecause you can only export default something once in a file.\n\nBut if you export const TextField you should import it like this;\n\nimport { TextField } from '@material-ui/core';\n\n\nSee this answer for more info",
2019-10-17T10:00:48