Làm cách nào để tạo kiểu cho các thành phần bằng makeStyles và vẫn có các phương thức vòng đời trong Material UI?

Question 1

Tôi gặp lỗi dưới đây bất cứ khi nào tôi cố gắng sử dụng makeStyles()với một thành phần có các phương thức vòng đời:

Cuộc gọi hook không hợp lệ. Hook chỉ có thể được gọi bên trong phần thân của một thành phần hàm. Điều này có thể xảy ra vì một trong những lý do sau:

Bạn có thể có các phiên bản React và trình kết xuất không khớp (chẳng hạn như React DOM)

Bạn có thể đang vi phạm Quy tắc của Hooks

Bạn có thể có nhiều hơn một bản sao của React trong cùng một ứng dụng

Dưới đây là một ví dụ nhỏ về mã tạo ra lỗi này. Các ví dụ khác cũng chỉ định các lớp cho các mục con. Tôi không thể tìm thấy bất kỳ điều gì trong tài liệu của MUI cho thấy các cách khác để sử dụng makeStylesvà khả năng sử dụng các phương pháp vòng đời.

    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

Xin chào, thay vì sử dụng hook API, bạn nên sử dụng API thành phần bậc cao hơn như đã đề cập ở đây

Tôi sẽ sửa đổi ví dụ trong tài liệu để phù hợp với nhu cầu của bạn đối với thành phần lớp

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

Tôi đã sử dụng withStylesthay vìmakeStyle

VÍ DỤ :

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

Những gì chúng tôi đã kết thúc là ngừng sử dụng các thành phần lớp và tạo các Thành phần chức năng, sử dụnguseEffect() từ API Hooks cho các phương thức vòng đời . Điều này cho phép bạn vẫn sử dụng makeStyles()với các Phương thức Vòng đời mà không cần thêm phức tạp khi tạo các Thành phần Thứ tự Cao hơn . Mà đơn giản hơn nhiều.

Thí dụ:

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 là một React hook được sử dụng trong các thành phần chức năng và không thể được sử dụng trong các thành phần lớp.

Từ React:

Hooks cho phép bạn sử dụng trạng thái và các tính năng khác của React mà không cần viết một lớp.

Ngoài ra, bạn nên gọi useStyleshook bên trong hàm của mình như;

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

Nếu bạn muốn sử dụng hook, đây là thành phần lớp ngắn gọn của bạn được thay đổi thành thành phần chức năng;

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;

🏓 trên ↓ CodeSandBox ↓

Question 6

Một giải pháp khác có thể được sử dụng cho các thành phần lớp - chỉ cần ghi đè các thuộc tính MUI Theme mặc định bằng MuiThemeProvider. Điều này sẽ mang lại sự linh hoạt hơn so với các phương pháp khác - bạn có thể sử dụng nhiều MuiThemeProvider bên trong thành phần mẹ của mình.

các bước đơn giản:

nhập MuiThemeProvider vào thành phần lớp của bạn
nhập createMuiTheme vào thành phần lớp của bạn
tạo chủ đề mới
bọc thành phần MUI mục tiêu mà bạn muốn tạo kiểu với MuiThemeProvider và chủ đề tùy chỉnh của bạn

vui lòng kiểm tra tài liệu này để biết thêm chi tiết: 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;

Mở rộng đoạn mã

Question 7

Thay vì chuyển đổi lớp thành một hàm, một bước dễ dàng sẽ là tạo một hàm để bao gồm jsx cho thành phần sử dụng 'các lớp', trong trường hợp của bạn <container></container>, sau đó gọi hàm này bên trong trả về của lớp render () như một thẻ. Bằng cách này, bạn đang chuyển hook sang một hàm từ lớp. Nó làm việc hoàn hảo cho tôi. Trong trường hợp của tôi, đó là một hàm <table>mà tôi đã chuyển sang một hàm- TableStmt bên ngoài và gọi hàm này bên trong kết xuất là<TableStmt/>