Material-ui: @ material-ui / styles: Verwendung in einer Klassenkomponente?

Sie können die Hooks in einer Klassenkomponente nicht verwenden. Sie benötigen eine Funktionskomponente oder die höhere Ordnung ( withStyles ).

Ich schließe, wenn wir einen ähnlichen Bericht sehen, denke ich, dass wir ihn dokumentieren sollten.

@oliviertassinari : Aber wenn die App als Klasse deklariert ist, wie mache ich das?
Denn in der App habe ich einen Status und andere Funktionen.

@ Angelk90 Sie sollten die Komponenten-API höherer Ordnung verwenden: https://github.com/mui-org/material-ui/issues/15820#issuecomment -495480040 ( withStyles ).

Gemäß Ihrer Dokumentation ist das API-Verwendungsbeispiel withStyles immer noch eine Funktionskomponente.

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

Deshalb habe ich Ihre Antwort abgelehnt.

@oliviertassinari
Wie kann ich makeStyles mit HOC verwenden?
Gemäß meinem Anwendungsfall benötige ich das Materialthemaobjekt mit Stil.

Wie von @ ghosh-jaideep vorgeschlagen,
So haben Sie die Möglichkeit, Theme-Dienstprogramme zu verwenden, wie z.

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

innerhalb einer Klassenkomponente?
Vielen Dank

Ich habe withStyles anstelle von makeStyle wie folgt verwendet ...

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 Wie wird LoginComponent aus übergeordneten Komponenten gerendert?

• Hast du das Thema als Requisiten bestanden?
• Haben Sie ThemeProvider in der übergeordneten Komponente verwendet?

Dies ist nützlicher, wenn Sie einen Codeausschnitt der übergeordneten Komponente freigeben.

Ich habe das Gleiche wie @ Ess-Soft gemacht und widthTheme zuvor mit Style hinzugefügt
withTheme(withStyles(useStyles)(LoginComponent ))

dann können Sie theme sogar innerhalb von render

Kann jemand das mit Stilen erklären. Ich kann ehrlich sagen, wenn ich solche Sachen sehe, denke ich, lol komm schon, Mann Angular ist einfach so viel normaler. 3 Stunden heute suchen und nach Antworten suchen und dann finde ich diese.

@ xtianus79 Diese API funktioniert auch mit Klassenkomponenten: https://material-ui.com/styles/basics/#higher -order-component-api.

@oliviertassinari kannst du ein Beispiel dafür mit dem Gitter zeigen? lol das ist was ich versuche zu tun und ich stecke genau dort fest. Ich verwende makeStyles und createStyles und kann nicht herausfinden, wie es ohne Funktion geht. Kannst du dabei helfen?

@ xtianus79 Weitere Hilfe zu

@oliviertassinari für dieses spezielle Problem und Anwendungsfall sehe ich es nicht.

Ummm. selbst https://material-ui.com/styles/basics/#higher -order-component-api antwortet noch nicht, wie man 'theme' benutzt? Warum werden nur Funktionskomponenten mit Hooks unterstützt? Menschen haben Legacy-Code oder die Notwendigkeit für klassenbasierte Komponenten.

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