Стили Material-UI: преобразование функционального компонента в компонент класса

Question

Поэтому я пытаюсь следующий код преобразовать функциональный компонент в классический компонент, он вроде работает, без ошибок , но стили не применяются .

import { makeStyles } from '@material-ui/core/styles';
import { withStyles } from '@material-ui/core/styles';
const playtheMusic = () => {
    pauseMusic();
};
const pausetheMusic = () => {
    pauseMusic();
};
const useStyles = makeStyles(theme => ({
    text: {
        padding: 50
    },
    paper: {
        paddingBottom: 50
    },
    list: {
        marginBottom: theme.spacing(2)
    },
    subheader: {
        backgroundColor: theme.palette.background.paper
    },
    appBar: {
        top: 'auto',
        bottom: 0,
        backgroundColor: '#282828',
        padding: '15px'
    },
    grow: {
        flexGrow: 1
    }
}));
class BottomAppBar extends React.Component {
    // const classes = useStyles();
    render() {
        const { classes } = this.props;
        return (
            <div>
                <AppBar position="fixed" className={classes.appBar}>
                    <div style={{ display: 'flex', alignItems: 'center', alignContent: 'center' }}>
                        <div>
                            <Typography style={{ fontSize: 15 }}> Stress Out </Typography>
                            <br />
                            <Typography style={{ fontSize: 12, color: '#B3B3B3' }}>
                                Twenty One Pilots
                            </Typography>
                        </div>
                        <div className={classes.grow} />
                        <div>
                            <IconButton style={{ color: 'white' }}>
                                <ShuffleIcon />
                            </IconButton>
                            <IconButton style={{ color: 'white' }}>
                                <SkipPreviousRoundedIcon style={{ fontSize: 30 }} />
                            </IconButton>
                            <IconButton onClick={pausetheMusic} style={{ color: 'white' }}>
                                <PauseCircleOutlineRoundedIcon style={{ fontSize: 46 }} />
                                <PlayCircleOutlineIcon style={{ fontSize: 46, display: 'none' }} />
                            </IconButton>
                            <IconButton style={{ color: 'white' }}>
                                <SkipNextRoundedIcon style={{ fontSize: 30 }} />
                            </IconButton>
                            <IconButton style={{ color: 'white' }}>
                                <RepeatIcon />
                            </IconButton>
                        </div>
                        <div className={classes.grow} />
                        <div>
                            <IconButton style={{ color: 'white' }}>
                                <VolumeUpIcon />
                            </IconButton>
                        </div>
                    </div>
                </AppBar>
            </div>
        );
    }
}
export default withStyles(useStyles)(BottomAppBar);

также существует проблема со StackOverflow. там написано: «Похоже, ваше сообщение в основном написано на коде; пожалуйста, добавьте больше деталей». вот почему я пишу некоторые ненужные вещи XD, вы можете пропустить это.

Спасибо за чтение. хорошего дня <3 </p>

Answer 1

Общий подход к стилевому оформлению компонентов пользовательского интерфейса :

Классический

withStyles (функция высокого порядка) + createStyles

Функциональный

useStyles (hooks) + makeStyles

---

В вашем коде вы не должны использовать крючки useStyles внутри withStyle, крюки не должны использоваться внутри каких-либо classical component,

• Неправильно здесь

export default withStyles(useStyles)(BottomAppBar);

• Правильный пример

import { withStyles, createStyles } from "@material-ui/core/styles";
const styles = theme => createStyles({
  root: {
  },
  // ...
});
...
const { classes } = this.props;
...
export default withStyles(styles)(App);

---

Онлайн-образец для classical component и functional component стайлинг