I have a dilemma with my Search component being used on 2 different pages. I want the styling of the search component to change depending on which page it's on. Specifically, I want to use the .btn class on the Home page but switch to another class when it's on the GetWordContainer page. Is there a solution for this scenario?
Part of App.js where both page routes are defined
<Switch>
<Route exact path="/" render={ routeProps =>
<Home
{...routeProps} />}
/>
<Route exact path="/definition/:word" render={routeProps =>
<GetWordContainer
{...routeProps} />}
/>
</Switch>
Snippet from the Search component - currently styled for the Home page only
class Search extends Component {
render (){
return (
<div>
<button className={styles['btn']} type="submit">search</button>
</div>
);
}
}
export default Search;
CSS for the Search component - style for the Home page
.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;
}