javascript - Material-UI样式: convert functional component to class component

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);

also, there is a problem with StackOverflow. it says "It looks like your post is mostly code; please add some more details". that's the reason I'm writing some unnecessary things XD you can skip it.

感谢您的阅读。祝你有美好的一天<3

Answer 1

material-ui component styling 的通用方法:

古典

withStyles(高阶函数)+createStyles

功能性

useStyles( Hook )+ makeStyles

<小时/>

在您的代码中，不得在 withStyle 内使用钩子(Hook) useStyles，钩子(Hook)不应在任何经典组件内使用，

• 这里错了

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);

<小时/>

经典组件和功能组件样式的在线示例