Material-ui: @ material-ui / styles: Uso em um componente de classe?

Criado em 24 mai. 2019 · 17Comentários · Fonte: mui-org/material-ui

Como usar a API makeStyles em um componente de classe? A documentação mostra apenas exemplos para componentes de função.

Quando tento usar isso no método render um componente de classe, recebo o seguinte erro:

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

Fonte

joncursi

👍3

Comentários muito úteis

usei withStyles vez de makeStyle assim ...

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 em 24 nov. 2019

👍55 🎉13 ❤11 🚀4

Todos 17 comentários

Você não pode usar os ganchos dentro de um componente de classe. Você precisa de um componente funcional ou de ordem superior ( withStyles ).

oliviertassinari em 24 mai. 2019

👎36 😕13 👍5 🎉1 😄1

Estou encerrando, se virmos relatório semelhante, acho que devemos documentá-lo.

oliviertassinari em 24 mai. 2019

@oliviertassinari : Mas se o app for declarado como uma classe, como faço isso?
Porque no aplicativo eu tenho um estado e outras funções.

Angelk90 em 1 jul. 2019

@ Angelk90 Você deve usar a API de componente de pedido superior: https://github.com/mui-org/material-ui/issues/15820#issuecomment -495480040 ( withStyles ).

oliviertassinari em 1 jul. 2019

De acordo com sua documentação, o exemplo de uso de withStyles api ainda é um componente de função.

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

É por isso que votei contra sua resposta.

medmin em 28 jul. 2019

😕4

@oliviertassinari
Como posso usar makeStyles com HOC?
De acordo com meu caso de uso, preciso do objeto de tema material em grande estilo.

ghosh-jaideep em 17 set. 2019

👍5

Como sugerido por @ ghosh-jaideep,
como ter a possibilidade de usar utilitários de tema, como:

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

dentro de um componente de classe?
obrigado

AndreaLombardo em 15 nov. 2019

usei withStyles vez de makeStyle assim ...

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 em 24 nov. 2019

👍55 🎉13 ❤11 🚀4

@ Ess-Soft Como LoginComponent é renderizado a partir de componentes pais?

Você passou o tema como adereços?
Você usou ThemeProvider no componente pai?

Será mais útil se você compartilhar o trecho de código do componente pai.

ppm-manish em 26 nov. 2019

👀2

Eu fiz a mesma coisa que @ Ess-Soft e adicionei widthTheme antes de withStyles
withTheme(withStyles(useStyles)(LoginComponent ))

então você pode usar theme mesmo dentro do render

dmcshehan em 20 dez. 2019

👍1

Alguém pode explicar a coisa com estilos. Posso dizer honestamente que quando vejo coisas assim, acho que lol vamos lá cara, o Angular é muito mais normal. 3 horas hoje procurando e procurando respostas e então eu encontro isso.

xtianus79 em 29 jun. 2020

👍1

@ xtianus79 Esta API também funciona com componentes de classe: https://material-ui.com/styles/basics/#higher -order-component-api.

oliviertassinari em 29 jun. 2020

@oliviertassinari você pode mostrar um exemplo disso com a grade? lol isso é o que estou tentando fazer e estou preso aí. Estou usando makeStyles e createStyles e não consigo descobrir como fazer isso sem uma função? Você pode me ajudar com isso.

xtianus79 em 29 jun. 2020

@ xtianus79 Você encontrará mais ajuda no StackOverflow

oliviertassinari em 29 jun. 2020

@oliviertassinari para esse problema e caso de uso em particular, não vejo.

xtianus79 em 30 jun. 2020

Ummm. ainda assim https://material-ui.com/styles/basics/#higher -order-component-api não responde como usar 'theme'? por que só oferece suporte a componentes funcionais com ganchos? as pessoas têm código legado ou precisam de componentes baseados em classe.