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

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

मैं इस्तेमाल किया 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 आपको उच्च क्रम के घटक API का उपयोग करना चाहिए: https://github.com/mui-org/material-ui/issues/15820#issuecomment -495480040 ( withStyles )।

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

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

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

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

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

[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 के समान काम किया और withStyles से पहले widthTheme को जोड़ा
withTheme(withStyles(useStyles)(LoginComponent ))

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

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

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

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

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

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

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

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

क्या यह पृष्ठ उपयोगी था?
0 / 5 - 0 रेटिंग्स

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

MomenYasser picture MomenYasser  ·  3टिप्पणियाँ

ianschmitz picture ianschmitz  ·  3टिप्पणियाँ

zachariahtimothy picture zachariahtimothy  ·  3टिप्पणियाँ

RafaelHovhannisyan picture RafaelHovhannisyan  ·  3टिप्पणियाँ

Davidmycodeguy picture Davidmycodeguy  ·  3टिप्पणियाँ