Material-UI样式:将功能组件转换为类组件 [英] Material-UI styles: convert functional component to class component

问题描述

因此，我尝试使用以下代码将功能组件转换为经典组件，这确实可行，没有错误，但没有应用样式.

 从'@ material-ui/core/styles'导入{makeStyles};从'@ material-ui/core/styles'导入{withStyles};const playtheMusic =()=>{pauseMusic();};const pausetheMusic =()=>{pauseMusic();};const useStyles = makeStyles(theme =>({文本: {填充:50}，纸: {paddingBottom:50}，列表: {marginBottom:theme.spacing(2)}，子标题:{backgroundColor:theme.palette.background.paper}，appBar:{top:自动"，底部:0，backgroundColor:'#282828'，内边距:"15px"}，生长: {flexGrow:1}}));BottomAppBar类扩展了React.Component {//const classes = useStyles();使成为() {const {classes} = this.props;返回 (< div>< AppBar position ="fixed" className = {classes.appBar}>< div style = {{display:'flex'，alignItems:'center'，alignContent:'center'}}>< div>< Typography style = {{fontSize:15}}>应力消除</Typography>< br/><Typography style={{ fontSize: 12, color: '#B3B3B3' }}>二十一个飞行员</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>);}}导出默认withStyles(useStyles)(BottomAppBar); 

另外，StackOverflow也有问题.它说:您的帖子似乎主要是代码；请添加更多详细信息".这就是我要写一些不必要的东西XD的原因您可以跳过它.

感谢您的阅读.祝你< 3

解决方案

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

解决方案

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

这篇关于Material-UI样式:将功能组件转换为类组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！