Почему Material-UI не распознает функцию theme.spacing?

Описание

Я пытаюсь использовать функцию тема.спейсинг Material-UI в приложении React, но функция интервал не распознается.

Сообщение об ошибке Javascript: TypeError: theme.spacing не является функцией

Я не уверен, является ли это ошибкой или у меня что-то не так с установленными версиями фреймворков.


Контекст

Это устанавливаемые версии фреймворков, согласно файлу пакет-lock.json:

  • Материал-пользовательский интерфейс: v3.9.2
  • Реагировать: v16.8.1
  • Хром: v72.0.3626.96
  • Машинописный текст: нет
  • создать-реагировать-приложение: v3.2.2

Это также может быть вызвано переходом с версии 4 на версию 5 пользовательского интерфейса материалов и может быть решено по-разному в зависимости от того, где тема по умолчанию называется stackoverflow.com/questions/67434882/….

Carmine Tambascia 10.12.2021 11:35

Также нужно быть осторожным с библиотекой эмоций, взаимодействующей с темой вещей.

Kzqai 31.12.2021 16:33
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
10
2
19 614
8
Перейти к ответу Данный вопрос помечен как решенный

Ответы 8

Ответ принят как подходящий

Что ж, оказывается, это все-таки баг, вызванный запрос №14099.

Исправление уже в пути, поэтому я закрываю этот вопрос.

Попробуй это.

import { makeStyles } from '@material-ui/core/styles' 
const userStyles = makeStyles (theme => ({
gridAlign : {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.secondary,
  },
})

Попробуйте обновить пакет @material-ui/core до минимальной версии 4.0.0.
Беги npm я @material-ui/[email protected]
Это решило мою проблему.

просто сделайте это следующим образом:

const theme = createMuiTheme({
  status: {
    danger: orange[500],
  },
});

export default function CustomStyles() {
  return (
    <ThemeProvider theme = {theme}>
      <CustomCheckbox />
    </ThemeProvider>
  );
}

Добавление импорта устраняет ошибку:

import {makeStyles} from "@material-ui/**core**/styles";

Раньше: import { makeStyles } from '@material-ui/core'; работал.

Но теперь в последних версиях пользовательского интерфейса материала нам нужно добавить следующий импорт:

import { makeStyles } from '@material-ui/styles';

Используя MUI версии 5 (V5.0.3), я получаю эту ошибку, потому что импорт makeStyles должен быть

import { makeStyles } from '@mui/styles';

См. документацию здесь: https://mui.com/styles/api/#heading-makestyles-styles-options-крюк

Для материала пользовательского интерфейса версии 5.1.0 у меня сработало следующее (как сказал @Worm)

  • импорт таких стилей
import { makeStyles } from '@mui/styles';

не забудьте установить @mui/styles

если вы получите предупреждение вроде

MUI: The `styles` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.
MUI: The `styles` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.

обернуть родительский контейнер с помощью ThemeProvider

export default ParentComponentName = (props)=>{
return(
   <ThemeProvider theme = {theme}>
      <SomeThemeComponent>
        <SomeComponent />
      </SomeThemeComponent>
    <ThemeProvider>
)
}

Ссылка

https://mui.com/styles/api/#examples-4

PS: опубликован как новый ответ, так как я не мог комментировать из-за кредитных лимитов.

Другие вопросы по теме