MakeStyles kullanarak bileşenleri nasıl stilize edebilirim ve yine de Material UI'da yaşam döngüsü yöntemlerine sahip olabilirsiniz?

Question 1

makeStyles()Yaşam döngüsü yöntemlerine sahip bir bileşenle kullanmaya çalıştığımda aşağıdaki hatayı alıyorum :

Geçersiz kanca çağrısı. Kancalar yalnızca bir işlev bileşeninin gövdesinin içinde çağrılabilir. Bu, aşağıdaki nedenlerden biri nedeniyle olabilir:

Uyuşmayan React ve oluşturucu sürümleriniz olabilir (React DOM gibi)

Hook Kurallarını çiğniyor olabilirsiniz

Aynı uygulamada birden fazla React kopyasına sahip olabilirsiniz

Aşağıda bu hatayı oluşturan küçük bir kod örneği verilmiştir. Diğer örnekler, sınıfları alt öğelere de atar. MUI'nin belgelerinde, makeStylesyaşam döngüsü yöntemlerini kullanmanın ve kullanmanın başka yollarını gösteren hiçbir şey bulamıyorum .

    import React, { Component } from 'react';
    import { Redirect } from 'react-router-dom';

    import { Container, makeStyles } from '@material-ui/core';

    import LogoButtonCard from '../molecules/Cards/LogoButtonCard';

    const useStyles = makeStyles(theme => ({
      root: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      },
    }));

    const classes = useStyles();

    class Welcome extends Component {
      render() {
        if (this.props.auth.isAuthenticated()) {
          return <Redirect to="/" />;
        }
        return (
          <Container maxWidth={false} className={classes.root}>
            <LogoButtonCard
              buttonText="Enter"
              headerText="Welcome to PlatformX"
              buttonAction={this.props.auth.login}
            />
          </Container>
        );
      }
    }

    export default Welcome;

Question 2

Merhaba, kanca API'si kullanmak yerine, burada belirtildiği gibi Yüksek dereceli bileşen API'sini kullanmalısınız

Sınıf bileşeni ihtiyacınıza uyacak şekilde dokümantasyondaki örneği değiştireceğim

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

const styles = theme => ({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

class HigherOrderComponent extends React.Component {

  render(){
    const { classes } = this.props;
    return (
      <Button className={classes.root}>Higher-order component</Button>
      );
  }
}

HigherOrderComponent.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(HigherOrderComponent);

Question 3

Kullandığım withStylesyerinemakeStyle

EX:

import { withStyles } from '@material-ui/core/styles';
import React, {Component} from "react";

const useStyles = theme => ({
        root: {
           flexGrow: 1,
         },
  });

class App extends Component {
       render() {
                const { classes } = this.props;
                return(
                    <div className={classes.root}>
                       Test
                </div>
                )
          }
} 

export default withStyles(useStyles)(App)

Question 4

Ne, sınıf bileşenleri ve oluşturulan Fonksiyonel Bileşenleri kullanılarak durduruldu yapıyor sona erdi kullanarakuseEffect() gelen yaşam döngüsü yöntemleri için Kancalar API . Bu, Yüksek Dereceli Bileşenler oluşturma karmaşıklığını eklemedenmakeStyles() Yaşam Döngüsü Yöntemleri ile kullanmaya devam etmenize olanak tanır . Hangisi çok daha basit.

Misal:

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Redirect } from 'react-router-dom';

import { Container, makeStyles } from '@material-ui/core';

import LogoButtonCard from '../molecules/Cards/LogoButtonCard';

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    margin: theme.spacing(1)
  },
  highlight: {
    backgroundColor: 'red',
  }
}));

// Highlight is a bool
const Welcome = ({highlight}) => { 
  const [userName, setUserName] = useState('');
  const [isAuthenticated, setIsAuthenticated] = useState(true);
  const classes = useStyles();

  useEffect(() => {
    axios.get('example.com/api/username/12')
         .then(res => setUserName(res.userName));
  }, []);

  if (!isAuthenticated()) {
    return <Redirect to="/" />;
  }
  return (
    <Container maxWidth={false} className={highlight ? classes.highlight : classes.root}>
      <LogoButtonCard
        buttonText="Enter"
        headerText={isAuthenticated && `Welcome, ${userName}`}
        buttonAction={login}
      />
   </Container>
   );
  }
}

export default Welcome;

Question 5

useStyles fonksiyonel bileşenlerde kullanılması amaçlanan ve sınıf bileşenlerinde kullanılamayan bir React kancadır.

React'ten:

Hook'lar, bir sınıf yazmadan durum ve diğer React özelliklerini kullanmanıza izin verir.

Ayrıca işlevinizin içinde aşağıdaki gibi useStyleshook çağırmalısınız ;

function Welcome() {
  const classes = useStyles();
...

Kancaları kullanmak istiyorsanız, işte kısa sınıf bileşeniniz işlevsel bileşene değiştirildi;

import React from "react";
import { Container, makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  root: {
    background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    border: 0,
    borderRadius: 3,
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
    color: "white",
    height: 48,
    padding: "0 30px"
  }
});

function Welcome() {
  const classes = useStyles();
  return (
    <Container className={classes.root}>
      <h1>Welcome</h1>
    </Container>
  );
}

export default Welcome;

🏓 üzerinde ↓ CodeSandBox ↓

Question 6

Sınıf bileşenleri için başka bir çözüm de kullanılabilir - sadece varsayılan MUI Theme özelliklerini MuiThemeProvider ile geçersiz kılın. Bu, diğer yöntemlere kıyasla daha fazla esneklik sağlayacaktır - üst bileşeninizin içinde birden fazla MuiThemeProvider kullanabilirsiniz.

basit adımlar:

MuiThemeProvider'ı sınıf bileşeninize içe aktarın
createMuiTheme'yi sınıf bileşeninize aktarın
yeni tema oluştur
MuiThemeProvider ve özel temanızla stil vermek istediğiniz hedef MUI bileşenini sarın

daha fazla ayrıntı için lütfen bu belgeye bakın: https://material-ui.com/customization/theming/

import React from 'react';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';

import { MuiThemeProvider } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';

const InputTheme = createMuiTheme({
    overrides: {
        root: {
            background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
            border: 0,
            borderRadius: 3,
            boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
            color: 'white',
            height: 48,
            padding: '0 30px',
        },
    }
});

class HigherOrderComponent extends React.Component {

    render(){
        const { classes } = this.props;
        return (
            <MuiThemeProvider theme={InputTheme}>
                <Button className={classes.root}>Higher-order component</Button>
            </MuiThemeProvider>
        );
    }
}

HigherOrderComponent.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default HigherOrderComponent;

Snippet'i genişlet

Question 7

Sınıfı bir işleve dönüştürmek yerine, kolay bir adım, 'sınıfları' kullanan bileşen için jsx'i içerecek bir işlev oluşturmaktır, sizin durumunuzda, <container></container>ve sonra bu işlevi sınıfın dönüşü içinde çağırın render () etiket olarak. Bu şekilde, kancayı sınıftan bir işleve taşıyorsunuz. Benim için mükemmel çalıştı. Benim durumumda, bir <table>işleve dışarıdaki TableStmt işlevine taşındım ve bu işlevi render içinde olarak adlandırdım<TableStmt/>