Material-UI：提供给 classes 道具的键 `sendButton` 未在 LoginManagementBase 中实现

问题描述

我知道为什么会发生这种情况，但不知道如何解决这个问题。

我有一个看起来像这样的 HOC：

    import React from 'react';
    import { withStyles } from '@material-ui/core/styles';
    import { Button,Box,Grid,Card,Container,CardContent } from '@material-ui/core';
    import Typography from '@material-ui/core/Typography';
    import { compose } from 'recompose';
    import AuthUserContext from './context';
    import { withFirebase } from '../firebase';
    import * as SIGN_IN from '../constants/signinmethods';
    
    const useStyles = theme => ({
        root: {
            backgroundColor: theme.palette.primary.light,},sendButton: {
            marginRight: theme.spacing(1),BoxShadow: theme.shadows[5],cardContent: {
            backgroundColor: theme.palette.primary.main,textField: {
            backgroundColor: theme.palette.primary.light,});
    
    const WithEmailVerification = Component => {
        class withEmailVerification extends React.Component {
            constructor() {
                super();
                this.state = { isSent: false };
            }
    
            onSendEmailVerification = () => {
                const { firebase } = this.props;
                firebase.doSendEmailVerification().then(() => this.setState({ isSent: true }));
            };
    
            needsEmailVerification = user => {
                const needs =
                    user &&
                    !user.emailVerified &&
                    user.providerData.map(provider => provider.providerId).includes(SIGN_IN.WITH_PASSWORD.id);
                return needs;
            };
    
            contentSelector = (isSent,authUser) => {
                const { classes } = this.props;
                let text;
                if (isSent) {
                    text = (
                        <p>
                            E-Mail confirmation sent: Check you E-Mails (Spam folder included) for a confirmation E-Mail. Refresh this
                            page once you confirmed your E-Mail.
                        </p>
                    );
                } else {
                    text = (
                        <p>
                            Verify your E-Mail: Check you E-Mails (Spam folder included) for a confirmation E-Mail or send another
                            confirmation E-Mail.
                        </p>
                    );
                }
                return (
                    <div className={classes.root}>
                        <Container maxWidth={false}>
                            <Grid>
                                <Card className={classes.cardContent}>
                                    <CardContent>
                                        <CardContent>
                                            <Typography gutterBottom variant="h4" component="h2" color="textSecondary">
                                                E-mail Verification
                                            </Typography>
                                            <Typography variant="body2" color="textSecondary" component="p">
                                                {text}
                                            </Typography>
                                        </CardContent>
                                        You are signing in with an E-mail and password and Before you can gain access the E-mail{' '}
                                        {authUser ? authUser.email : ''} must be verified!
                                    </CardContent>
                                </Card>
                            </Grid>
                            <Grid container spacing={24}>
                                <Grid item lg={4}>
                                    <Box display="flex" justifyContent="flex-start">
                                        <CardContent>
                                            <Button
                                                onClick={this.onSendEmailVerification}
                                                disabled={isSent}
                                                color="primary"
                                                variant="contained"
                                                className={classes.sendButton}
                                            >
                                                Send confirmation E-Mail again
                                            </Button>
                                        </CardContent>
                                    </Box>
                                </Grid>
                            </Grid>
                        </Container>
                    </div>
                );
            };
    
            render() {
                const { isSent } = this.state;
                return (
                    <AuthUserContext.Consumer>
                        {authUser =>
                            this.needsEmailVerification(authUser) ? (
                                <div>{this.contentSelector(isSent,authUser)}</div>
                            ) : (
                                <Component {...this.props} />
                            )
                        }
                    </AuthUserContext.Consumer>
                );
            }
        }

    return compose(withFirebase,withStyles(useStyles))(withEmailVerification);
};

export default WithEmailVerification;

我使用这个 HOC 就像这个标准程序：

export default withEmailVerification(LoginManagementBase);

这给了我这个警告：

这是因为 HOC 中的这一行：<Component {...this.props} />

HOC 的 useStyles 覆盖了 LoginManagementBase useStyles 并且更改 HOC 的 useStyles 道具的名称会产生此错误。

如何在 HOC 中使用样式而不将它们传播给子 LoginView 我应该在 HOC 中使用内联样式吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）