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 스타일은 @ material-ui / styles npm 패키지로 구동됩니다. React를위한 스타일링 솔루션입니다. 이 솔루션은 격리되어 있으며 기본 Material-UI 테마에 대한 지식이 없습니다. React의 컨텍스트에 테마를 체계적으로 삽입 할 필요를 없애기 위해 스타일 모듈 (makeStyles, withStyles 및 styled)을 기본 Material-UI 테마로 래핑합니다.

솔직히 말해서 여기서 요점을 이해하지 못하며 이것이 문제와 어떻게 관련되어 있는지 이해하지 못합니다. 즉, core/styles 에서 가져올 때 이미 배송 되었기 때문에 ThemeProvider가 필요하지 않습니다.

추가 컨텍스트를 제공하기 위해 내 코드는 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/ 에서 찾은 것과 동일한 방법

소음 죄송합니다!

https://material-ui.com/styles/x의 모든 것은 머티리얼 디자인과 관련이 없습니다. React를위한 스타일링 솔루션입니다.

죄송합니다. 여전히 이해할 수 없습니다.
우리는 보낼 수 theme 스타일에 인수로, 그리고하여 포장 withstyles ? 다음과 같이.

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

테마를 스타일에 대한 인수로 보내고 withstyles로 래핑 할 수 있습니까? 다음과 같이.

@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

그것의 작동