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 / styles npm. إنه حل تصفيف لـ React. هذا الحل منفصل ، وليس لديه معرفة بموضوع Material-UI الافتراضي. لإزالة الحاجة إلى إدخال سمة في سياق React بشكل منهجي ، نقوم بلف وحدات النمط (makeStyles ، withStyles and 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 لا علاقة له بالتصميم متعدد الأبعاد. إنه حل تصفيف لـ 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

انها تعمل