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

Question

我有一个React应用程序，它现在有两条路线（主登陆页面和职业页面）。

我制作了一个可重用的JumbotronResponsive组件，并将单个组件渲染为JumbotronLanding组件（用于登录页面）下的子项，以及作为JumbotronCareer组件（用于职业页面）下的子项。

像这样

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

export default class JumbotronCareer extends PureComponent {

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

和这个

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

export default class JumbotronLanding extends PureComponent {

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

如您所见，那些父组件具有一些样式，在这些样式中，我想为某些ResponsiveJumbotron的零件设置样式。
例如，我希望jumbotron在着陆页上的字体大小为70px ，在职业页面上为45px 。
但是，当我在路线之间切换时，这些样式就像在一个CSS文件中一样。
问题是“如何将它们彼此分开？”。

Answer 1

您可以添加className属性，并在您的ResponsiveJumbotron中使用它，例如

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

[...] 

export default class JumbotronLanding extends PureComponent {

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

您可以在样式表中使用该CSS类