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

Question

So I try the following code to convert a functional component to the classical component, it kinda worked, no error but styles are not applied .

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.

Thanks for reading. have a good day <3

Answer 1

A common approach for material-ui component styling :

Classical

withStyles (High order function) + createStyles

Functional

useStyles (hooks) + makeStyles

---

In your code, you shall not use the hooks useStyles inside withStyle , hooks shouldn't be used inside any classical component ,

• Wrong here

export default withStyles(useStyles)(BottomAppBar);

• Right example

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

---

Online sample for both classical component and functional component styling