Как стилизовать компоненты с помощью makeStyles и при этом использовать методы жизненного цикла в пользовательском интерфейсе материалов?

Привет, вместо использования хука 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 HigherOrderComponentUsageExample extends React.Component {
  
  render(){
    const { classes } = this.props;
    return (
      <Button className = {classes.root}>This component is passed to an HOC</Button>
      );
  }
}

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

export default withStyles(styles)(HigherOrderComponentUsageExample);

В итоге мы прекратили использование компонентов класса и создали функциональные компоненты используя useEffect() из 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;

Вместо преобразования класса в функцию простым шагом было бы создать функцию, включающую jsx для компонента, который использует «классы», в вашем случае <container></container>, а затем вызвать эту функцию внутри возврата класса render( ) в качестве тега. Таким образом, вы перемещаете крючок на функцию из класса. Это сработало отлично для меня. В моем случае это был <table>, который я переместил в функцию TableStmt снаружи и назвал эту функцию внутри рендера как <TableStmt/>

useStyles — это хук React, который предназначен для использования в функциональных компонентах и ​​не может использоваться в компонентах класса.

Из реакции:

Hooks let you use state and other React features without writing a class.

Также вы должны вызвать 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 ↓

Я использовал 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)

Еще одно решение можно использовать для компонентов класса - просто переопределите свойства темы MUI по умолчанию с помощью MuiThemeProvider. Это даст больше гибкости по сравнению с другими методами — вы можете использовать более одного MuiThemeProvider внутри вашего родительского компонента.

простые шаги:

1. импортируйте MuiThemeProvider в компонент вашего класса
2. импортировать createMuiTheme в ваш компонент класса
3. создать новую тему
4. оберните целевой компонент 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;

Вы вызываете хук useStyles вне функции. Вот почему

В дополнение к ответу, предоставленному @vikas-kumar, также можно использовать props, которые устанавливаются для стилизованного компонента, например.

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: props => props.height,
    padding: '0 30px',
  },
});

Таким образом, height для применяемого стиля может регулироваться

<HigherOrderComponentUsageExample height = {48}/>

Дополнительные сведения о динамическом стиле см. здесь: https://material-ui.com/styles/basics/#adapting-the-higher-order-component-api.