基于路由有条件地渲染 CSS (React)

乔恩

到目前为止,这是我的 App.js 组件:

function App() {
  return (
    <div className="App">
      <Router>
        <NavBar />
        <Switch>
         <Route exact path='/' component={HomepageLayout} />
         <Route exact path='/post/:id' component={Post}/>

        </Switch>
      </Router>
    </div>
  );
}

我需要根据正在呈现的路由来呈现类的 CSS 值。呈现 HomepageLayout 组件时,我需要以下内容:

样式文件

 .ui.inverted.vertical.center.aligned.segment{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    z-index: 2;  
 }

然后,我需要在呈现 Post 组件时更改此目标的值,以便基本上删除样式:

样式文件

 .ui.inverted.vertical.center.aligned.segment{
    position: none;
    left: none;
    top: none;
    width: none;
    z-index: none;  
 }

有没有办法根据路由更改特定 CSS 类标签的样式?我见过使用 的示例,但有没有办法用 / 做到这一点?

蒙佐尔塔马尔

像这样使用它

<Component header />

// component

const Component = ({header}) => {

  const conditionalClass = header ? 'yesHeader' : 'noHeader';
  return (
   <p className={conditionalClass}>this is </p>
  )

}

你可以使用这个以及

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章