javascript - 改变路由时如何切换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 类