更改路线时如何在React组件的CSS样式之间切换？

Question

I have a React app which now has two routes (the main landing page and career page).

I made one reusable JumbotronResponsive component and i am rendering that single component as child under JumbotronLanding component (for landing page) and as child under JumbotronCareer component (for career page).

Like this

import React, { PureComponent } from 'react'
import { ResponsiveJumbotron } from '../../HOC';
import './jumbotronCareer.css';

export default class JumbotronCareer extends PureComponent {

  render() {
    return (
      <>
        <ResponsiveJumbotron/>
      </>
    )
  }
}

and this

import React, { PureComponent } from 'react';
import { ResponsiveJumbotron } from '../../HOC';
import './jumbotronLanding.css';

export default class JumbotronLanding extends PureComponent {

  render() {
    return (
      <>
        <ResponsiveJumbotron/>
      </>
    )
  }
}

As you can see those parent components have styles in which i want to style some ResponsiveJumbotron 's parts.
For example i wish font-size of jumbotron in landing page be 70px and in career page be 45px .
But when i switch between routes those styles are like in one CSS file.
The question is 'how to separate them from each other?'.

Answer 1

You can add a className property and in your ResponsiveJumbotron use it like

const ResponsiveJumbotron = props => <div className={props.className} />;

[...] 

export default class JumbotronLanding extends PureComponent {

  render() {
    return (
      <>
        <ResponsiveJumbotron className="landing-page" />
      </>
    )
  }
}

and you can use that css class in your stylesheet