В чем разница между различными способами импорта компонентов Material-UI?

Question

Из прочтения документации Material-UI и примеров в Интернете, похоже, существуют разные способы импорта одного и того же элемента:

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

В чем разница между различными способами импорта?

Answer 1

Основное отличие возникает при комплектации. Используя именованный импорт:

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

извлекает весь модуль @material-ui/core. Это означает, что вы связываете все в модуле (и все зависимости). И есть много компонентов в core .

Импорт:

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

Только загружает TextField компонент (и его зависимости)

Я бы предположил, что другие пути, где можно найти TextField (например, material-ui/TextField), предназначены для обратной совместимости с предыдущими версиями библиотеки.

Answer 2

Это потому, что они экспортируются по-разному, когда вы export default TextField можете импортировать TextField с таким образом,

import TextField from '@material-ui/core/TextField'; Поскольку вы можете экспортировать что-то по умолчанию только один раз в файле.

Но если вы export const TextField, вы должны импортировать его следующим образом:

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

См. Этот ответ для получения дополнительной информации