ReactJS 在 classComponent 中使用样式答案

【问题标题】：ReactJS Using styles within classComponentReactJS 在 classComponent 中使用样式
【发布时间】：2020-06-04 18:47:21
【问题描述】：

美好的一天。我无法弄清楚如何在 classComponent 中使用样式。代码如下：

const image = require('../../static/images/auth_bg.jpg');
const useStyles = makeStyles((theme) => ({
    paper: {
        paddingTop: theme.spacing(15),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
    },
    form: {
        width: '100%', // Fix IE 11 issue.
        marginTop: theme.spacing(1),
    },
    submit: {
        margin: theme.spacing(3, 0, 2),
    },
    btn_forgot: {
        color: '#000',
        textDecorator: 'none'
    },
    btn_register: {
        color: '#000',
        textDecorator: 'none'
    },
    bg: {
        height: "100%",
        width: "100%",
        backgroundImage: `url(${image})`,
        backgroundSize: "cover",
    },
}));

class SignIn extends React.Component {
    render() {
        // console.log(image);
        const { classes } = useStyles;
        return (
            <div className={classes.bg}>
                <Container component="main" maxWidth="xs" pt={5}>
                    <CssBaseline/>
                    <div className={classes.paper}>
                        <Typography
                            component="h1"
                            variant="h5"
                            style={{color: 'white'}}
                        >
                            Sign in
                        </Typography>
                        <form className={classes.form}>
                            <MyEmailField/>
                            <MyPasswordField
                                label="Password"
                            />
                            <Button
                                type="submit"
                                fullWidth
                                variant="contained"
                                color="default"
                                className={classes.submit}
                            >
                                Sign In
                            </Button>
                            <Grid container>
                                <Grid item xs>
                                    <Link
                                        to="/reset"
                                        variant="body1"
                                        className={classes.btn_forgot}
                                        style={{textDecoration: 'none'}}
                                    >
                                        Forgot password?
                                    </Link>
                                </Grid>
                                <Grid item>
                                    <Link
                                        to="/register"
                                        variant="body2"
                                        className={classes  .btn_register}
                                        style={{textDecoration: 'none'}}
                                    >
                                        {"Don't have an account? Sign Up"}
                                    </Link>
                                </Grid>
                            </Grid>
                        </form>
                    </div>
                </Container>
            </div>
        );
    }
}

export default SignIn;

错误：

TypeError：类未定义

我对特定于 js 的理解有误，有人能指出那是什么吗？是否应该在类组件中导入所有样式？

跳过我对js特定的理解不正确，有人能指出那是什么吗？是否应该在类组件中导入所有样式？

【问题讨论】：

假设这是来自材质库，需要调用useStyles()，并使用返回值而不是返回值const classes = useStyles()的属性
除了错误地调用useStyles，或者根本不调用，useStyles 是一个反应钩子，只与功能组件兼容。请改用withStyles HOC。 material-ui.com/styles/basics/#higher-order-component-api

标签： reactjs

【解决方案1】：

根据 Drew Reeses 的回答，我更改了以下内容

const useStyles = theme => ({
    paper: {
        paddingTop: theme.spacing(15),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
    },
    form: {
        width: '100%', // Fix IE 11 issue.
        marginTop: theme.spacing(1),
    },
    submit: {
        margin: theme.spacing(3, 0, 2)
    },
    btn_forgot: {
        color: '#000',
        textDecorator: 'none'
    },
    btn_register: {
        color: '#000',
        textDecorator: 'none'
    },
    bg: {
        height: "100%",
        width: "100%",
        backgroundImage: `url(${image})`,
        backgroundSize: "cover",
    },
});



export default withStyles(useStyles)(SignIn);

【讨论】：