如何根据应用内使用位置差异化设置React.js组件样式？

给你几个只用单个CSS文件就能实现的方法，按需选择即可：

1. 给页面根元素加标识类 #

在页面的根容器（比如<body>或者App的根<div>）上，根据当前页面添加不同类名——首页加home-page，其他页面用默认样式覆盖。然后在CSS里通过后代选择器区分样式：

/* 默认样式（其他页面通用） */
.navbar {
  background-color: #ffffff;
  display: block;
}

/* 首页专属样式 */
.home-page .navbar {
  background-color: #2d3748;
  display: flex;
}

这种方法不用修改组件代码，只需要在页面根节点做判断加类就能生效。

2. 给Navbar组件传动态类名 #

让Navbar组件接收一个标识是否在首页的属性（比如isHome），渲染时动态拼接类名：
以React为例：

function Navbar({ isHome }) {
  const navClass = isHome ? "navbar navbar-home" : "navbar";
  return <nav className={navClass}>导航内容</nav>;
}

CSS里单独编写首页专属样式：

.navbar {
  background-color: #ffffff;
  display: block;
}

.navbar-home {
  background-color: #2d3748;
  display: flex;
}

使用时，首页调用<Navbar isHome={true} />，其他页面直接用<Navbar />即可。Vue、Angular等框架也可以用类似的动态绑定类名方式实现。

3. 结合路由标识动态切换样式 #

如果项目用了路由框架（比如React Router、Vue Router），可以直接通过路由信息判断当前页面，给Navbar添加对应类：
以Vue为例：

<template>
  <nav :class="['navbar', $route.name === 'Home' ? 'navbar-home' : '']">
    导航内容
  </nav>
</template>

<style>
.navbar {
  background-color: #ffffff;
  display: block;
}

.navbar-home {
  background-color: #2d3748;
  display: flex;
}
</style>

这种方法不需要手动传属性，路由切换时会自动识别页面并切换样式。

内容的提问来源于stack exchange，提问作者sharif_17