Material-UI — это популярная библиотека компонентов пользовательского интерфейса React, которая предоставляет широкий спектр заранее разработанных компонентов. Одним из наиболее часто используемых компонентов является компонент Button, который позволяет разработчикам с легкостью создавать интерактивные кнопки. Однако при использовании пакета @material-ui/core и попытке импортировать компонент Button вы можете столкнуться с сообщением об ошибке: «@material-ui/core» не содержит экспорта по умолчанию (импортированного как «Button ‘)”. В этой статье мы рассмотрим различные способы устранения этой ошибки и успешного импорта компонента Button.

Метод 1: импорт кнопки в качестве именованного экспорта
Если возникает ошибка «экспорт по умолчанию», это означает, что компонент «Кнопка» не экспортируется в качестве экспорта по умолчанию из пакета «@material-ui/core». Чтобы решить эту проблему, мы можем вместо этого импортировать компонент Button как именованный экспорт. Вот пример:

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

Метод 2: использование именованного импорта ES6
Другой способ импортировать компонент Button — использование именованного импорта ES6. Этот подход позволяет вам импортировать отдельные компоненты из пакета @material-ui/core по отдельности. Вот пример:

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

Метод 3: импорт компонента «Кнопка» из другого файла
В некоторых случаях компонент «Кнопка» может быть экспортирован из другого файла в пакете @material-ui/core. Чтобы успешно импортировать его, вам необходимо определить правильный файл и импортировать его соответствующим образом. Вот пример:

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

Метод 4: использование компонента Button из другого пакета Material-UI
Если ни один из вышеперечисленных методов не работает, возможно, вы используете устаревшую версию Material-UI или может возникнуть проблема с установкой. В таких случаях вы можете попробовать импортировать компонент Button из другого пакета Material-UI. Например, вы можете попробовать использовать @mui/material вместо @material-ui/core. Вот пример:

import Button from '@mui/material/Button';

Обнаружение ошибки «@material-ui/core» не содержит экспорта по умолчанию (импортированного как «Кнопка»)» при работе с компонентом «Кнопка» Material-UI может расстроить. Однако, используя методы, описанные в этой статье, вы сможете решить эту проблему и успешно импортировать компонент Button. Не забудьте проверить версии вашего пакета, убедиться в правильности синтаксиса импорта и при необходимости изучить альтернативные пакеты Material-UI. Приятного кодирования!