Material-ui: @ material-ui / styles: الاستخدام في مكون فئة؟

تم إنشاؤها على ٢٤ مايو ٢٠١٩  ·  17تعليقات  ·  مصدر: mui-org/material-ui

كيف يستخدم المرء makeStyles API داخل مكون فئة؟ يعرض التوثيق فقط أمثلة لمكونات الوظيفة.

عندما أحاول استخدام هذا في طريقة render لأحد مكونات الفصل ، يظهر لي الخطأ التالي:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
docs question

التعليق الأكثر فائدة

لقد استخدمت withStyles بدلاً من makeStyle هكذا ...

import React from 'react';
import { withStyles } from '@material-ui/core/styles';

const styles = (theme) => ({
  fab: {
    position: 'fixed',
    bottom: theme.spacing(2),
    right: theme.spacing(2),
  },
});

class LoginComponent extends React?Component {
  render() {
    const { classes } = this.props;
    /** your UI components... */
  }
}

export default withStyles(syles)(LoginComponent);

ال 17 كومينتر

لا يمكنك استخدام الخطافات داخل مكون فئة. أنت بحاجة إلى مكون وظيفي أو لاستخدام الترتيب الأعلى ( withStyles ).

أنا أختم ، إذا رأينا تقريرًا مشابهًا ، أعتقد أنه يجب علينا توثيقه.

oliviertassinari : ولكن إذا تم الإعلان عن التطبيق كفئة كيف أفعل ذلك؟
لأنه في التطبيق لدي حالة ووظائف أخرى.

@ Angelk90 يجب عليك استخدام واجهة برمجة التطبيقات للمكونات ذات الترتيب الأعلى: https://github.com/mui-org/material-ui/issues/15820#issuecomment -495480040 ( withStyles ).

وفقًا لوثائقك ، لا يزال مثال استخدام واجهة برمجة التطبيقات withStyles أحد مكونات الوظيفة.

https://material-ui.com/styles/basics/

لهذا السبب رفضت إجابتك.

تضمين التغريدة
كيف يمكنني استخدام MakeStyles مع HOC؟
وفقًا لحالة الاستخدام الخاصة بي ، أحتاج إلى كائن الموضوع المادي بأسلوب أنيق.

كما اقترح @ ghosh-jaideep ،
كيفية الحصول على إمكانية استخدام الأدوات المساعدة للموضوع مثل:

[theme.breakpoints.up("md")]: {
          paddingLeft: theme.spacing(2),
          paddingTop: theme.spacing(2)
}

داخل مكون فئة؟
شكر

لقد استخدمت withStyles بدلاً من makeStyle هكذا ...

import React from 'react';
import { withStyles } from '@material-ui/core/styles';

const styles = (theme) => ({
  fab: {
    position: 'fixed',
    bottom: theme.spacing(2),
    right: theme.spacing(2),
  },
});

class LoginComponent extends React?Component {
  render() {
    const { classes } = this.props;
    /** your UI components... */
  }
}

export default withStyles(syles)(LoginComponent);

@ Ess-Soft كيف يتم عرض LoginComponent من المكونات الرئيسية؟

  • هل مررت الموضوع كدعامات؟
  • هل استخدمت ThemeProvider في المكون الرئيسي؟

سيكون أكثر فائدة إذا قمت بمشاركة مقتطف التعليمات البرمجية للمكون الرئيسي.

فعلت نفس الشيء مثل @ Ess-Soft وأضفت widthTheme من قبل مع الأنماط
withTheme(withStyles(useStyles)(LoginComponent ))

ثم يمكنك استخدام theme حتى داخل render

يمكن لأي شخص أن يشرح الشيء مع الأنماط. أستطيع أن أقول بصراحة عندما أرى أشياء مثل هذه أعتقد أن الضحك بصوت مرتفع يأتي على الرجل أنجولار هو مجرد طبيعي أكثر بكثير. 3 ساعات اليوم أبحث عن إجابات ثم أجدها.

@ xtianus79 تعمل واجهة برمجة التطبيقات هذه مع مكونات الفئة أيضًا: https://material-ui.com/styles/basics/#higher -order-component-api.

oliviertassinari هل يمكنك إظهار مثال على ذلك مع الشبكة؟ لول هذا ما أحاول القيام به وأنا عالق هناك. أنا أستخدم makeStyles و createStyles ولا يمكنني معرفة كيفية القيام بذلك بدون وظيفة؟ هل يمكن أن تساعد في ذلك.

@ xtianus79 سوف تجد المزيد من المساعدة في StackOverflow

oliviertassinari لهذه المشكلة بالذات وحالة الاستخدام لا أرى ذلك.

امم. لا يزال https://material-ui.com/styles/basics/#higher -order-component-api لا يجيب على كيفية استخدام "السمة"؟ لماذا يدعم فقط المكونات الوظيفية مع الخطافات؟ الأشخاص لديهم رمز قديم أو يحتاجون إلى مكونات قائمة على الفصل.

DewangS انظر withTheme() API: https://material-ui.com/styles/api/#withtheme -component-component.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات