Як стилізувати компоненти за допомогою makeStyles і все одно мати методи життєвого циклу в інтерфейсі матеріалу?

Question 1

Я отримую нижченаведену помилку щоразу, коли намагаюся використовувати makeStyles()з компонентом методи життєвого циклу:

Недійсний дзвінок підключення. Гачки можна викликати лише всередині тіла функціонального компонента. Це може статися з однієї з таких причин:

Можливо, у вас є невідповідні версії React та візуалізатора (наприклад, React DOM)

Можливо, ви порушуєте Правила гачків

У вас може бути більше однієї копії React в одному додатку

Нижче наведено невеликий приклад коду, який видає цю помилку. Інші приклади також призначають класи дочірнім предметам. Я не можу знайти в документації MUI нічого, що показує інші способи використання makeStylesта має можливість використовувати методи життєвого циклу.

    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

Привіт, замість того, щоб використовувати API хука, ти повинен використовувати API компонентів вищого порядку, як згадано тут

Я зміню приклад у документації відповідно до ваших потреб у компоненті класу

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

Я використовував withStylesзамістьmakeStyle

ЕКС:

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

Що ми в результаті зробили, припиняємо використовувати компоненти класу та створюємо функціональні компоненти, використовуючиuseEffect() з Hooks API для методів життєвого циклу . Це дозволяє продовжувати використовувати makeStyles()методи життєвого циклу, не ускладнюючи створення компонентів вищого порядку . Що набагато простіше.

Приклад:

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 - це гачок React, який призначений для використання у функціональних компонентах і не може бути використаний у компонентах класу.

З React:

Хуки дозволяють використовувати стан та інші функції React без написання класу.

Також вам слід викликати useStylesхук всередині вашої функції типу;

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

Якщо ви хочете використовувати хуки, ось ваш короткий компонент класу, змінений на функціональний компонент;

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;

🏓 на ↓ CodeSandBox ↓

Question 6

Ще одне рішення можна використовувати для компонентів класу - просто перевизначте властивості теми MUI за замовчуванням за допомогою MuiThemeProvider. Це надасть більшу гнучкість у порівнянні з іншими методами - ви можете використовувати більше одного MuiThemeProvider всередині вашого батьківського компонента.

прості кроки:

імпортуйте MuiThemeProvider до компонента вашого класу
імпортуйте createMuiTheme до компонента вашого класу
створити нову тему
оберніть цільовий компонент MUI, який ви хочете стилізувати, за допомогою MuiThemeProvider та власної теми

будь-ласка, ознайомтесь із цим документом для отримання додаткової інформації: 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;

Розгорніть фрагмент

Question 7

Замість перетворення класу у функцію простим кроком було б створити функцію для включення jsx для компонента, який використовує 'класи', у вашому випадку, <container></container>а потім викликати цю функцію всередині повернення класу render () як тег. Таким чином ви пересуваєте гачок до функції з класу. У мене це спрацювало ідеально. У моєму випадку це було те, <table>яке я перемістив до функції - TableStmt зовні і викликав цю функцію всередині візуалізації як<TableStmt/>