基于路由有条件地呈现CSS（React）

以下是迄今为止我的App.js组件：

函数应用程序（）{
返回(
);
}

我需要根据正在渲染的路由渲染类的CSS值。呈现HomepageLayout组件时，我需要以下内容：

styles.css

.ui.inversed.vertical.center.aligned.segment{
位置：固定；
左：0px；
顶部：0px；
宽度：100%；
z指数：2；
}

然后，我需要在渲染Post组件时更改此目标的值，以便基本上删除样式：

styles.css

.ui.inversed.vertical.center.aligned.segment{
职位：无；
左：无；
顶部：无；
宽度：无；
z指数：无；
}

有没有办法根据路线更改特定CSS类标记的样式？我看到过使用的示例，但是有没有办法使用/？

这样使用它

<Component header />

// component

const Component = ({header}) => {

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

}

//组成部分
常量组件=（{header}）=>{
const conditionalClass=header？'yesHeader'：'noHeader'；
返回(
这是
)
}

---

您也可以使用

谢谢-类名帮助。