Question

我正在尝试将Material-ui（https://material-ui.com/demos/app-bar/）中的应用栏添加到我的NavBar组件中。 Material-ui示例创建一个函数并将其导出。

class App extends Component {
render() {
return (
  <div>
    <NavBar />
  </div>
);
}
}

NavBar组件应从“材质”示例返回应用栏。

class NavBar extends Component {

render() {
    return (
        //App Bar from material.
    )
}
}

export default NavBar;

到目前为止，我已经尝试创建const并将其用于导航栏组件render（）

const styles = {
root: {
    flexGrow: 1,
},
grow: {
    flexGrow: 1,
},
menuButton: {
    marginLeft: -12,
    marginRight: 20,
},
};

NavBar类扩展了组件{

render() {
    return (
        <AppBar position="static">
        <Toolbar>
          <IconButton className={styles.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" color="inherit" className={styles.grow}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    )
}
}

但是它的呈现方式与示例不同，例如，登录按钮将其放置在“新闻”标签旁边。

Answer 1

您是否像材料示例中那样将NavBar组件包装在withStyles HOC中？看来您正在尝试直接在styles中使用className对象，但无法按预期使用。您必须使用NavBar将样式传递到withStyles组件中，例如：

export default withStyles(styles)(NavBar);

然后从NavBar道具访问classes中的样式：

render() {
  const { classes } = this.props;
  return (
    <AppBar position="static">
      <Toolbar>
        <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
          <MenuIcon />
        </IconButton>
        <Typography variant="h6" color="inherit" className={classes.grow}>
          News
        </Typography>
        <Button color="inherit">Login</Button>
      </Toolbar>
    </AppBar>
  );
}

withStyles HOC将您的styles对象注册为CSS，并将类名传递到包装的组件（在本例中为NavBar）中，以便您可以在render函数中使用它们。您可以在Material-UI here中找到有关withStyles的更多信息。

如何将Material-ui应用栏添加到类组件？

1 个答案: