Material-ui: @ सामग्री-उई / शैलियाँ: कक्षा घटक में उपयोग?

को निर्मित 24 मई 2019 · 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

स्रोत

joncursi

👍3

सबसे उपयोगी टिप्पणी

मैं इस्तेमाल किया 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);

essare 24 नव॰ 2019

👍55 🎉13 ❤11 🚀4

सभी 17 टिप्पणियाँ

आप किसी वर्ग घटक के अंदर हुक का उपयोग नहीं कर सकते। आपको एक कार्यशील घटक की आवश्यकता है या उच्च क्रम ( withStyles ) का उपयोग करने के लिए।

oliviertassinari 24 मई 2019

👎36 😕13 👍5 🎉1 😄1

मैं बंद कर रहा हूं, अगर हम इसी तरह की रिपोर्ट देखते हैं, तो मुझे लगता है कि हमें इसका दस्तावेज बनाना चाहिए।

oliviertassinari 24 मई 2019

@oliviertassinari : लेकिन अगर ऐप को एक वर्ग के रूप में घोषित किया जाता है तो मैं इसे कैसे करूँ?
क्योंकि ऐप में मेरे पास एक राज्य और अन्य फ़ंक्शन हैं।

Angelk90 1 जुल॰ 2019

@ Angelk90 आपको उच्च क्रम के घटक API का उपयोग करना चाहिए: https://github.com/mui-org/material-ui/issues/15820#issuecomment -495480040 ( withStyles )।

oliviertassinari 1 जुल॰ 2019

आपके दस्तावेज़ के अनुसार, withStyles एपीआई उपयोग उदाहरण अभी भी एक फ़ंक्शन घटक है।

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

इसलिए मैंने आपके उत्तर को गलत बताया।

medmin 28 जुल॰ 2019

😕4

@oliviertassinari
मैं एचओसी के साथ मेकसाइल का उपयोग कैसे कर सकता हूं?
मेरे उपयोग के मामले के अनुसार, मुझे शैली में सामग्री विषय वस्तु की आवश्यकता है।

ghosh-jaideep 17 सित॰ 2019

👍5

जैसा कि @ घोष-जयदीप ने सुझाव दिया है,
कैसे इस तरह के रूप में विषय उपयोगिताओं का उपयोग करने की संभावना है:

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

एक वर्ग घटक के अंदर?
धन्यवाद

AndreaLombardo 15 नव॰ 2019

मैं इस्तेमाल किया 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);

essare 24 नव॰ 2019

👍55 🎉13 ❤11 🚀4

@ Ess-Soft कैसे मूल घटकों से LoginComponent प्रदान किया जाता है?

क्या आपने प्रसंग के रूप में विषय पास किया है?
क्या आपने मूल घटक में ThemeProvider का उपयोग किया था?

यदि आप मूल घटक का कोड स्निपेट साझा करते हैं तो यह अधिक उपयोगी होगा।

ppm-manish 26 नव॰ 2019

👀2

मैंने @ Ess-Soft के समान काम किया और withStyles से पहले widthTheme को जोड़ा
withTheme(withStyles(useStyles)(LoginComponent ))

तो आप उपयोग कर सकते हैं theme भी अंदर render

dmcshehan 20 दिस॰ 2019

👍1

किसी को शैलियों बात के साथ समझा सकते हैं। मैं ईमानदारी से कह सकता हूं कि जब मैं इस तरह से सामान देखता हूं तो मुझे लगता है कि आदमी पर आना लाजिमी है एंगुलर सिर्फ इतना सामान्य है। 3 घंटे आज खोज रहे हैं और जवाब ढूंढ रहे हैं और फिर मुझे यह पता चला है।

xtianus79 29 जून 2020

👍1

@ xtianus79 यह एपीआई वर्ग के घटकों के साथ भी काम करता है: https://material-ui.com/styles/basics/#higher -order-Components -api।

oliviertassinari 29 जून 2020

@oliviertassinari क्या आप ग्रिड के साथ इसका एक उदाहरण दिखा सकते हैं? योग्य है जो मैं करने की कोशिश कर रहा हूं और मैं वहीं फंस गया हूं। मैं MakeStyles और createStyles का उपयोग कर रहा हूं और मैं यह पता लगा सकता हूं कि बिना फ़ंक्शन के यह कैसे करना है? क्या आप इसमें मदद कर सकते हैं

xtianus79 29 जून 2020

@ xtianus79 आपको StackOverflow पर अधिक मदद मिलेगी

oliviertassinari 29 जून 2020

उस विशेष मुद्दे और उपयोग के मामले के लिए @oliviertassinari मैं इसे नहीं देखता।

xtianus79 30 जून 2020

Ummm। अभी भी https://material-ui.com/styles/basics/#higher -order-Components-api 'थीम' का उपयोग करने का जवाब नहीं देता है? केवल हुक के साथ कार्यात्मक घटकों का समर्थन क्यों करता है? लोगों के पास विरासत कोड या वर्ग आधारित घटकों की आवश्यकता है।

DewangS 23 जुल॰ 2020

@DewangS withTheme() API देखें: https://material-ui.com/styles/api/#withtheme -component- घटक।

oliviertassinari 23 जुल॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Material-ui: @ सामग्री-उई / शैलियाँ: कक्षा घटक में उपयोग?

सबसे उपयोगी टिप्पणी

सभी 17 टिप्पणियाँ

संबंधित मुद्दों