Material-ui: @ material-ui / styles : 클래스 구성 요소에서의 사용?

에 만든 2019년 05월 24일 · 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 에 2019년 11월 24일

👍55 🎉13 ❤11 🚀4

모든 17 댓글

클래스 구성 요소 내에서 후크를 사용할 수 없습니다. 기능적인 구성 요소가 필요하거나 더 높은 차수 ( withStyles )를 사용해야합니다.

oliviertassinari 에 2019년 05월 24일

👎36 😕13 👍5 🎉1 😄1

마감하겠습니다. 비슷한 보고서가 보이면 문서화해야한다고 생각합니다.

oliviertassinari 에 2019년 05월 24일

@oliviertassinari :하지만 앱이 클래스로 선언되면 어떻게해야하나요?
앱에는 상태 및 기타 기능이 있기 때문입니다.

Angelk90 에 2019년 07월 01일

@ Angelk90 상위 구성 요소 API : https://github.com/mui-org/material-ui/issues/15820#issuecomment -495480040 ( withStyles )를 사용해야합니다.

oliviertassinari 에 2019년 07월 01일

문서에 따르면 withStyles api 사용 예제는 여전히 함수 구성 요소입니다.

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

그게 내가 당신의 대답에 반대표를 던진 이유입니다.

medmin 에 2019년 07월 28일

😕4

안녕하세요.
HOC에서 makeStyles를 어떻게 사용할 수 있습니까?
내 사용 사례에 따라 스타일의 머티리얼 테마 개체가 필요합니다.

ghosh-jaideep 에 2019년 09월 17일

👍5

@ ghosh-jaideep이 제안했듯이,
다음과 같은 테마 유틸리티를 사용하는 방법 :

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

클래스 구성 요소 내부?
감사

AndreaLombardo 에 2019년 11월 15일

내가 사용 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 에 2019년 11월 24일

👍55 🎉13 ❤11 🚀4

@ Ess-Soft 부모 구성 요소에서 LoginComponent 는 어떻게 렌더링됩니까?

테마를 소품으로 전달 했습니까?
부모 구성 요소에서 ThemeProvider 을 사용 했습니까?

상위 컴포넌트의 코드 스 니펫을 공유하면 더 유용합니다.

ppm-manish 에 2019년 11월 26일

👀2

@ Ess-Soft와 동일한 작업을 수행하고 withStyles 전에 widthTheme를 추가했습니다.
withTheme(withStyles(useStyles)(LoginComponent ))

그러면 render 내부에서도 theme 사용할 수 있습니다.

dmcshehan 에 2019년 12월 20일

👍1

누군가 스타일로 설명 할 수 있습니까? 솔직히 이런 걸 보면 ㅋㅋㅋ ㅋㅋㅋ ㅋㅋㅋ ㅋㅋㅋ ㅋㅋㅋ 오늘 3 시간 동안 검색하고 답을 찾고 나서 이것을 찾았습니다.

xtianus79 에 2020년 06월 29일

👍1

@ xtianus79 이 API는 https://material-ui.com/styles/basics/#higher -order -component-api 클래스 구성 요소에서도 작동합니다.

oliviertassinari 에 2020년 06월 29일

@oliviertassinari 그리드로 그 예를 보여줄 수 있습니까? ㅋㅋ 그게 내가하려는 일이고 바로 거기에 갇혀 있어요. 나는 makeStyles와 createStyles를 사용하고 있는데 함수없이 어떻게 할 수 있는지 알 수 없습니까? 도와 주실 수 있나요?

xtianus79 에 2020년 06월 29일

@ xtianus79 StackOverflow에서 더 많은 도움말을 찾을 수 있습니다.

oliviertassinari 에 2020년 06월 29일

@oliviertassinari 는 특정 문제와 사용 사례에 대해 잘 모르겠습니다.

xtianus79 에 2020년 06월 30일

음. 여전히 https://material-ui.com/styles/basics/#higher -order-component-api가 'theme'사용 방법에 대답하지 않습니까? 후크가있는 기능적 구성 요소 만 지원하는 이유는 무엇입니까? 사람들은 레거시 코드를 가지고 있거나 클래스 기반 구성 요소가 필요합니다.

DewangS 에 2020년 07월 23일

@DewangS withTheme() API : https://material-ui.com/styles/api/#withtheme -component-component를

oliviertassinari 에 2020년 07월 23일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Material-ui: @ material-ui / styles : 클래스 구성 요소에서의 사용?

가장 유용한 댓글

모든 17 댓글

관련 문제