Material-ui: theme.spacingは、@ material-ui / [styles / core] 4.0.1の関数ではありません。

@keulコアとスタイルの違いに注意してください：

@oliviertassinariに感謝します。

Material-UIスタイルは、@ material-ui / stylesnpmパッケージを利用しています。 これは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

その働き