Material-UI 样式：将功能组件转换为类组件答案

【问题标题】：Material-UI styles: convert functional component to class componentMaterial-UI 样式：将功能组件转换为类组件
【发布时间】：2020-06-29 19:22:12
【问题描述】：

所以我尝试使用以下代码将功能组件转换为经典组件，它有点工作，没有错误但未应用样式。

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 你可以跳过它。

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

【问题讨论】：

标签： javascript html css reactjs material-ui

【解决方案1】：

material-ui component styling 的常用方法：

古典

withStyles（高阶函数）+createStyles

功能性

useStyles（钩子）+ makeStyles

在您的代码中，您不应在 withStyle 内使用挂钩 useStyles，不应在任何 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 样式的在线示例

【讨论】：