Material-ui: @ material-ui / styles: Penggunaan dalam Komponen Kelas?

Dibuat pada 24 Mei 2019 · 17Komentar · Sumber: mui-org/material-ui

Bagaimana seseorang menggunakan makeStyles API di dalam komponen kelas? Dokumentasi hanya menunjukkan contoh untuk komponen fungsi.

Ketika saya mencoba menggunakan ini dalam metode komponen kelas render , saya mendapatkan kesalahan berikut:

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

Sumber

joncursi

👍3

Komentar yang paling membantu

saya menggunakan withStyles alih-alih makeStyle seperti ini ...

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 pada 24 Nov 2019

👍55 🎉13 ❤11 🚀4

Semua 17 komentar

Anda tidak dapat menggunakan kait di dalam komponen kelas. Anda membutuhkan komponen functionnal atau menggunakan urutan yang lebih tinggi ( withStyles ).

oliviertassinari pada 24 Mei 2019

👎36 😕13 👍5 🎉1 😄1

Saya tutup, jika kami melihat laporan serupa, saya pikir kami harus mendokumentasikannya.

oliviertassinari pada 24 Mei 2019

@oliviertassinari : Tetapi jika aplikasi dideklarasikan sebagai kelas bagaimana cara melakukannya?
Karena dalam aplikasi saya memiliki status dan fungsi lainnya.

Angelk90 pada 1 Jul 2019

@ Angelk90 Anda harus menggunakan API komponen tingkat tinggi: https://github.com/mui-org/material-ui/issues/15820#issuecomment -495480040 ( withStyles ).

oliviertassinari pada 1 Jul 2019

Menurut dokumentasi Anda, contoh penggunaan withStyles api masih merupakan komponen fungsi.

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

Itulah mengapa saya menolak jawaban Anda.

medmin pada 28 Jul 2019

😕4

@oliviantri
Bagaimana saya bisa menggunakan makeStyles dengan HOC?
Sesuai kasus penggunaan saya, saya memerlukan objek tema material dalam gaya.

ghosh-jaideep pada 17 Sep 2019

👍5

Seperti yang disarankan oleh @ ghosh-jaideep,
bagaimana memiliki kemungkinan untuk menggunakan utilitas tema seperti:

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

di dalam komponen kelas?
Terima kasih

AndreaLombardo pada 15 Nov 2019

saya menggunakan withStyles alih-alih makeStyle seperti ini ...

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 pada 24 Nov 2019

👍55 🎉13 ❤11 🚀4

@ Ess-Soft Bagaimana LoginComponent dirender dari komponen induk?

Apakah Anda melewatkan tema sebagai properti?
Apakah Anda menggunakan ThemeProvider dalam komponen induk?

Akan lebih berguna jika Anda membagikan cuplikan kode dari komponen induk.

ppm-manish pada 26 Nov 2019

👀2

Saya melakukan hal yang sama dengan @ Ess-Soft dan menambahkan widthTheme sebelum withStyles
withTheme(withStyles(useStyles)(LoginComponent ))

maka Anda dapat menggunakan theme bahkan di dalam render

dmcshehan pada 20 Des 2019

👍1

Adakah yang bisa menjelaskan hal dengan gaya. Sejujurnya saya dapat mengatakan ketika saya melihat hal-hal seperti ini saya pikir lol ayolah, Angular jauh lebih normal. 3 jam hari ini mencari dan mencari jawaban dan kemudian saya menemukan ini.

xtianus79 pada 29 Jun 2020

👍1

@ xtianus79 API ini juga bekerja dengan komponen kelas: https://material-ui.com/styles/basics/#higher -order-component-api.

oliviertassinari pada 29 Jun 2020

@oliviertassinari dapatkah Anda menunjukkan contoh yang berarti dengan grid? lol itulah yang saya coba lakukan dan saya terjebak di sana. Saya menggunakan makeStyles dan createStyles dan saya tidak tahu bagaimana melakukannya tanpa fungsi? Bisakah Anda membantu dengan itu.

xtianus79 pada 29 Jun 2020

@ xtianus79 Anda akan menemukan bantuan lebih lanjut di StackOverflow

oliviertassinari pada 29 Jun 2020

@oliviertassinari untuk masalah khusus dan kasus penggunaan itu Saya tidak melihatnya.

xtianus79 pada 30 Jun 2020

Ummm. bahkan masih https://material-ui.com/styles/basics/#higher -order-component-api tidak menjawab bagaimana cara menggunakan 'theme'? mengapa hanya mendukung komponen fungsional dengan Hooks? orang memiliki kode warisan atau kebutuhan untuk komponen berbasis kelas.