كيف يستخدم المرء 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.
لا يمكنك استخدام الخطافات داخل مكون فئة. أنت بحاجة إلى مكون وظيفي أو لاستخدام الترتيب الأعلى ( 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.
التعليق الأكثر فائدة
لقد استخدمت
withStyles
بدلاً منmakeStyle
هكذا ...