小编Sha*_*iar的帖子

嘿，我有一个主页组件的背景图片。我已将背景图像放置在标题组件中。在我的标题组件中有一个导航栏和背景图像。我已将 Header 组件放置在 React Router 内的开关外部，以便某些页面可以访问导航栏。现在我想做的是，当我进入食物描述页面时，我想保留导航栏，但我想更改/删除背景图像。我怎样才能做到这一点？

应用程序.js

function App() {
  return (
    <div>
      <DataContextProvider>
        <LoginContextProvider>
          <Router>
            <Header></Header>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/login" component={Login} />
              <Route path="/food/:id" component={FoodDetail} />
            </Switch>
          </Router>
        </LoginContextProvider>
      </DataContextProvider>
    </div>
  );
}

header.js

<div className={classes.grow}>
      <AppBar position="fixed" style={{ backgroundColor: "white" }}>
        <Container>
          <Toolbar>
            <Link to="/">
              <Typography className={classes.title} variant="h6" noWrap>
                Material-UI
              </Typography>
            </Link>

            <div className={classes.grow} />
            <div className={classes.sectionDesktop}>
              {loggedInUser.email ? (
                <MenuItem onClick={handleProfileMenuOpen}>
                  <IconButton
                    aria-label="account of current user"
                    aria-controls="primary-search-account-menu"
                    aria-haspopup="true"
                    color="inherit"
                  >
                    <AccountCircleIcon style={{ fill: …