Comment utilisez-vous différents noms de classe dans le composant en fonction de l'itinéraire?

J'ai 2 pages qui utilisent le même composant de recherche. J'aimerais que le composant de recherche soit différent en fonction de la page sur laquelle il se trouve. J'ai actuellement la classe .btn que je souhaite utiliser sur la page d'accueil mais je ne sais pas comment passer à une autre classe si elle se trouve sur la page GetWordContainer. Quelqu'un connaît-il la meilleure façon de procéder?

Partie de App.js où se trouvent les itinéraires des deux pages

 <Switch>
    <Route exact path="/" render={ routeProps => 
      <Home 
        {...routeProps} />} 
      />
    <Route exact path="/definition/:word" render={routeProps => 
      <GetWordContainer 
        {...routeProps} />} 
      />
  </Switch>

Une partie du composant de recherche - J'ai actuellement un style que je souhaite utiliser sur la page d'accueil

La recherche de classe étend le composant {

render (){
  return (
    <div>
      <button className={styles['btn']} type="submit">search</button>
    </div>
  );
}
}

export default Search;

Recherche css - c'est le style que j'ai, que je souhaite utiliser pour la page d'accueil

.btn{
    border:none;
    outline:none;
    /* display:block; */
    border-radius:50px 50px 50px 50px;
    width:200px;
    height:60px;
    font-size:30px;
    font-weight:700;
    font-family:segoe ui light;
    background-color:#CDA177;
    color:#FFFFFF;
    transition:all .5s ease-in-out;
    }