到目前为止,这是我的 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] 删除。
我来说两句