Material-ui: theme.spacing не является функцией @ material-ui / [styles / core] 4.0.1

@keul Обратите внимание на разницу между ядром и стилями: https://material-ui.com/customization/default-theme/#material -ui-core-styles-vs-material-ui-styles.

Спасибо @oliviertassinari.

Стили Material-UI основаны на пакете npm @ material-ui / styles. Это стилизованное решение для React. Это решение изолировано, оно не знает темы Material-UI по умолчанию. Чтобы устранить необходимость систематического внедрения темы в контекст React, мы обертываем модули стиля (makeStyles, withStyles и styled) с помощью темы Material-UI по умолчанию.

Честно говоря, я не понимаю ни сути, ни того, как это связано с проблемой. Это означает, что мне не нужен ThemeProvider, потому что он уже отправлен при импорте из core/styles ?

Просто чтобы дать дополнительный контекст: мой код работал с использованием core 4.0.0 и styles 3.0.0-alpha.10
У меня возникла проблема сегодня утром после перехода на 4.0.1

Я могу быстро вернуться к старой версии с блокировкой пакетов, но я хотел бы получить общую картину

@keul Хорошо, может быть, будет понятнее следующее. Вы вводите новую тему, несовместимую с основными компонентами. Вам следует использовать createMuiTheme.

import { createMuiTheme } from "@material-ui/core";

const theme = createMuiTheme({
  spacing: 4,
  palette: {
    primary: {
      main: "#007bff",
    },
  }
});

@oliviertassinari ну ... спасибо. Это устранило проблему.

Я почти уверен, что скопировал этот необработанный код из документации, это тот же способ, который я нашел на https://material-ui.com/styles/advanced/. Как новый пользователь (в прошлый раз, когда я использовал MUI, это была версия 0.x), это не совсем понятно, но мне, вероятно, придется уделить этому время.

Простите за шум!

Все, что находится на https://material-ui.com/styles/x, не имеет отношения к Material Design. Это стилизованное решение для React.

Извините, я все еще не понимаю.
Можно ли отправить theme в качестве аргумента стилям и обернуть его withstyles ? Как следующее.

const styles = theme => {({
    root: {
      // JSS uses px as the default units for this CSS property.
      padding: theme.spacing(2), // = 8 * 2
    },
})};

Можем ли мы отправить тему в качестве аргумента стилям и обернуть ее с помощью стилей? Как следующее.

@ByronHsu Да, если вы импортируете из @material-ui/core/styles или если вы вводите тему, созданную с помощью createMuiTheme() .

Но он возвращает theme.spacing не является функцией.

@ByronHsu У вас есть репродукция?

Извините, я обнаружил проблему.
Я меняю import { withStyles } from '@material-ui/styles'; на import { withStyles } from '@material-ui/core/styles'; и все работает нормально.
Благодаря!

У меня тоже возникла эта проблема, и я использую

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

const useStyles = makeStyles((theme: Theme) => ({
  icon: {
    marginRight: theme.spacing(1)
  }
}));

Этот компонент заключен в <ThemeProvider />

Такая же проблема возникает, если я вместо этого использую:

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

const useStyles = makeStyles((theme: Theme) => ({
  icon: {
    marginRight: theme.spacing(1)
  }
}));

Я получил:

TypeError: theme.spacing is not a function

Все пакеты MUI обновлены, основная ветка.

Неважно, ошибка новичка. Я забыл обернуть свою новую тему в createMuiTheme - вместо этого я возвращал базовый объект.

тоже самое

Я вижу эту проблему, если делаю все, как ожидалось, кроме кода для внешней темы, когда ее нет. Например:

перерывы:

<MuiThemeProvider theme={outer => ({...outer, ...theme})}>...</MuiThemeProvider>

работает:

<MuiThemeProvider>
  <MuiThemeProvider theme={outer => ({...outer, ...theme})}>...</MuiThemeProvider>
</MuiThemeProvider>

Вижу, для этого случая есть предупреждение. Кажется, что он все равно должен работать или, по крайней мере, оставить эту логику предоставленной функции.

идти от
marginRight: theme.spacing(1)

измените это на
marginRight: theme.spacing.unit

Для меня это тоже проблема. Кажется, это ошибка типа, потому что я регистрирую само значение, и оно работает, но next.js выдает ошибку, говоря, что его не существует. Точки останова тоже.

Извините, я обнаружил проблему.
Я меняю import { withStyles } from '@material-ui/styles'; на import { withStyles } from '@material-ui/core/styles'; и все работает нормально.
Благодаря!

Спасибо @ByronHsu

работает