Material-ui: @ material-ui / styles: ¿Uso en un componente de clase?

Creado en 24 may. 2019 · 17Comentarios · Fuente: mui-org/material-ui

¿Cómo se usa la API makeStyles dentro de un componente de clase? La documentación solo muestra ejemplos de componentes de funciones.

Cuando trato de usar esto dentro del método render un componente de clase, obtengo el siguiente error:

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

Fuente

joncursi

👍3

Comentario más útil

Usé withStyles lugar de makeStyle así ...

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

👍55 🎉13 ❤11 🚀4

Todos 17 comentarios

No puede usar los ganchos dentro de un componente de clase. Necesita un componente funcional o utilizar el orden superior ( withStyles ).

oliviertassinari en 24 may. 2019

👎36 😕13 👍5 🎉1 😄1

Estoy cerrando, si vemos un informe similar, creo que deberíamos documentarlo.

oliviertassinari en 24 may. 2019

@oliviertassinari : Pero si la aplicación se declara como una clase, ¿cómo lo hago?
Porque en la aplicación tengo un estado y otras funciones.

Angelk90 en 1 jul. 2019

@ Angelk90 Debe utilizar la API de componentes de orden superior: https://github.com/mui-org/material-ui/issues/15820#issuecomment -495480040 ( withStyles ).

oliviertassinari en 1 jul. 2019

De acuerdo con su documentación, el ejemplo de uso de withStyles api sigue siendo un componente de función.

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

Por eso voté en contra de tu respuesta.

medmin en 28 jul. 2019

😕4

@oliviertassinari
¿Cómo puedo usar makeStyles con HOC?
Según mi caso de uso, necesito el objeto de tema material con estilo.

ghosh-jaideep en 17 sept. 2019

👍5

Como lo sugirió @ ghosh-jaideep,
cómo tener la posibilidad de utilizar utilidades temáticas como:

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

dentro de un componente de clase?
Gracias

AndreaLombardo en 15 nov. 2019

Usé withStyles lugar de makeStyle así ...

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

👍55 🎉13 ❤11 🚀4

@ Ess-Soft ¿Cómo se procesa LoginComponent partir de los componentes principales?

¿Pasaste el tema como accesorios?
¿Usó ThemeProvider en el componente principal?

Será más útil si comparte un fragmento de código del componente principal.

ppm-manish en 26 nov. 2019

👀2

Hice lo mismo que @ Ess-Soft y agregué widthTheme antes conStyles
withTheme(withStyles(useStyles)(LoginComponent ))

entonces puede usar theme incluso dentro de render

dmcshehan en 20 dic. 2019

👍1

¿Alguien puede explicar lo de los estilos? Honestamente puedo decir que cuando veo cosas como esta, creo que jajaja, vamos, Angular es mucho más normal. Hoy 3 horas buscando y buscando respuestas y luego encuentro esto.

xtianus79 en 29 jun. 2020

👍1

@ xtianus79 Esta API también funciona con componentes de clase: https://material-ui.com/styles/basics/#higher -order-component-api.

oliviertassinari en 29 jun. 2020

@oliviertassinari ¿puedes mostrar un ejemplo de ello con la cuadrícula? jajaja, eso es lo que estoy tratando de hacer y estoy atrapado allí. Estoy usando makeStyles y createStyles y no puedo entender cómo hacerlo sin una función. Puedes ayudar con eso.

xtianus79 en 29 jun. 2020

@ xtianus79 Encontrarás más ayuda en StackOverflow

oliviertassinari en 29 jun. 2020

@oliviertassinari para ese problema en particular y caso de uso no lo veo.

xtianus79 en 30 jun. 2020

Ummm. ¿Aún así https://material-ui.com/styles/basics/#higher -order-component-api no responde cómo usar 'theme'? ¿Por qué solo admite componentes funcionales con Hooks? la gente tiene código heredado o la necesidad de componentes basados en clases.