Material-ui: theme.spacing bukan fungsi dengan @ material-ui / [styles / core] 4.0.1

@keul Perhatikan perbedaan antara inti dan gaya: https://material-ui.com/customization/default-theme/#material -ui-core-styles-vs-material-ui-styles.

Terima kasih @oliviertassinari.

Gaya Material-UI diberdayakan oleh paket @ material-ui / styles npm. Ini adalah solusi gaya untuk React. Solusi ini terisolasi, tidak memiliki pengetahuan tentang tema Material-UI default. Untuk menghilangkan kebutuhan untuk memasukkan tema dalam konteks React secara sistematis, kami membungkus modul gaya (makeStyles, withStyles dan gaya) dengan tema Material-UI default

Sejujurnya saya tidak mengerti maksudnya di sini, atau bagaimana hal ini terkait dengan masalah tersebut. Ini berarti saya tidak memerlukan ThemeProvider karena sudah dikirim saat mengimpor dari core/styles ?

Hanya untuk memberikan konteks tambahan: kode saya bekerja menggunakan core 4.0.0 dan styles 3.0.0-alpha.10
Saya mulai mengalami masalah pagi ini, setelah bermigrasi ke 4.0.1

Saya dapat dengan cepat kembali ke versi penguncian paket yang lama, tetapi saya ingin mendapatkan gambaran besarnya

@keul Baiklah, mungkin berikut ini akan lebih jelas. Anda memasukkan tema baru yang tidak kompatibel dengan komponen inti. Anda harus menggunakan createMuiTheme.

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

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

@oliviertassinari baik ... terima kasih. Ini memperbaiki masalah.

Saya cukup yakin saya menyalin kode mentah ini dari dokumentasi, itu cara yang sama untuk pergi yang saya temukan di https://material-ui.com/styles/advanced/. Sebagai pengguna baru (terakhir kali saya menggunakan MUI itu versi 0.x) ini tidak terlalu jelas tetapi saya mungkin harus memberikan waktu.

Maaf atas kebisingannya!

Apa pun di https://material-ui.com/styles/x adalah Desain Material tidak terkait. Ini adalah solusi gaya untuk React.

Maaf, saya masih belum mengerti.
Bisakah kita mengirim theme sebagai argumen untuk gaya, dan membungkusnya dengan withstyles ? Seperti berikut ini.

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

Bisakah kita mengirim tema sebagai argumen untuk gaya, dan membungkusnya dengan gaya? Seperti berikut ini.

@ByronHsu Ya, jika Anda mengimpor dari @material-ui/core/styles atau jika Anda memasukkan tema yang dibuat dengan createMuiTheme() .

Tapi itu mengembalikan theme.spacing bukan fungsi.

@ByronHsu Apakah Anda memiliki reproduksi?

Maaf saya menemukan masalahnya.
Saya mengubah import { withStyles } from '@material-ui/styles'; menjadi import { withStyles } from '@material-ui/core/styles'; dan semuanya bekerja dengan baik.
Terima kasih!

Saya mengalami masalah ini juga dan saya menggunakan

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

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

Komponen ini dibungkus dengan <ThemeProvider />

Masalah yang sama terjadi jika saya menggunakan:

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

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

Saya mendapat:

TypeError: theme.spacing is not a function

Semua paket MUI terbaru, cabang master.

Tidak apa-apa, kesalahan pemula. Saya lupa membungkus tema baru saya dengan createMuiTheme - Saya mengembalikan objek dasar sebagai gantinya.

sama disini

Saya melihat masalah ini jika saya melakukan semuanya seperti yang diharapkan, kecuali kode untuk tema luar jika tidak ada. Sebagai contoh:

istirahat:

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

karya:

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

Saya melihat ada peringatan untuk kasus ini. Sepertinya itu harus tetap berfungsi, atau setidaknya biarkan logika itu ke fungsi yang disediakan.

pergi dari
marginRight: theme.spacing(1)

ubah menjadi
marginRight: theme.spacing.unit

Ini juga menjadi masalah bagi saya. Tampaknya ini adalah jenis kesalahan, karena saya sedang mencatat nilai itu sendiri dan berfungsi, tetapi next.js membuat kesalahan yang mengatakan bahwa itu tidak ada. Breakpoint juga.

Maaf saya menemukan masalahnya.
Saya mengubah import { withStyles } from '@material-ui/styles'; menjadi import { withStyles } from '@material-ui/core/styles'; dan semuanya bekerja dengan baik.
Terima kasih!

Terima kasih @ByronHsu

bekerja