Question

最近，我尝试使用Material-UI创建一些内容，但是遇到问题，我找不到任何相关信息。所以基本上我在使用SvgIcon时出现此错误（图标未显示）：

Warning: Failed prop type: The prop `children` is marked as required in `SvgIcon`, but its value is `undefined`.
    in SvgIcon (created by WithStyles(SvgIcon))
    in WithStyles(SvgIcon) (at Navbar.jsx:35)
    in span (created by IconButton)
    in button (created by ButtonBase)
    in ButtonBase (created by WithStyles(ButtonBase))
    in WithStyles(ButtonBase) (created by IconButton)
    in IconButton (created by WithStyles(IconButton))
    in WithStyles(IconButton) (at Navbar.jsx:34)
    in div (created by Toolbar)
    in Toolbar (created by WithStyles(Toolbar))
    in WithStyles(Toolbar) (at Navbar.jsx:33)
    in header (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by AppBar)
    in AppBar (created by WithStyles(AppBar))
    in WithStyles(AppBar) (at Navbar.jsx:32)
    in div (at Navbar.jsx:31)
    in Navbar (created by WithStyles(Navbar))
    in WithStyles(Navbar) (created by Connect(WithStyles(Navbar)))
    in Connect(WithStyles(Navbar)) (at App.jsx:29)
    in div (at App.jsx:28)
    in App (created by WithStyles(App))
    in WithStyles(App) (created by Connect(WithStyles(App)))
    in Connect(WithStyles(App)) (at src/index.js:15)
    in Provider (at src/index.js:14)
    in MuiThemeProvider (at src/index.js:13)

仅当我尝试将代码拆分为较小的组件时，才会发生这种情况，以下是此问题发生的示例。我可以通过将 Navbar.jsx 内容移动到 App.jsx 来解决此问题，但这不是我要存档的内容。

App.jsx

class App extends React.Component {

    constructor(props) {
        super(props);

        const {dispatch} = this.props;
        history.listen((location, action) => {
            dispatch(alertActions.clear())
        });
    }

    render() {
        const { alert, authorization } = this.props;
        return (
            <div id={'someid'}>
                <Navbar/>
                <div className="col-sm-8 col-sm-offset-2">
                    {alert.message &&
                    <div className={`alert ${alert.type}`}>{alert.message}</div>
                    }
                    <Router history={history}>
                        <div>
                            <PrivateRoute exact path="/" component={HomePage}/>
                        </div>
                    </Router>
                </div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    const {alert, authorization} = state;
    return {
        alert,
        authorization
    };
}

const connectedApp = connect(mapStateToProps)(App);
export {connectedApp as App}

Navbar.jsx

class Navbar extends React.Component {

    render() {
        const { classes, authorization } = this.props;
        return (
            <div className={classes.root}>
                <AppBar position="static">
                    <Toolbar>
                        <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
                            <MenuIcon/>
                        </IconButton>
                        <Typography variant="h6" color="inherit" className={classes.grow}>
                            {!authorization.loggedIn && <div>not logged</div>}
                        </Typography>
                        {!authorization.loggedIn && (<LoginDialog/>)}
                        {authorization.loggedIn && (<LoggedMenu/>)}
                    </Toolbar>
                </AppBar>
            </div>
        );
    }
}

function mapStateToProps(state) {
    const {authorization} = state;
    return {
        authorization
    };
}

const connectedApp = connect(mapStateToProps)(withStyles(styles)(Navbar));
export {connectedApp as Navbar}

我使用material-ui错了吗？：）

Answer 1

材料ui没有MenuIcon图标。在https://material.io/tools/icons/?search=menu&style=baseline

上查看图标

您需要导入Menu图标

或者您将MenuIcon导入App组件中，而不导入Navbar

SvgIcon的Material-UI属性'children'为'undefined'

1 个答案: