更改路由时如何在 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部件的样式。
例如，我希望登陆页面中巨型屏幕的字体大小70px，职业页面中的字体大小45px。
但是当我在路由之间切换时，这些样式就像在一个 CSS 文件中一样。
问题是"如何将它们彼此分开？

Answer 1

您可以添加一个 className 属性，并在 Responsive Jumbotron 中像

const ResponsiveJumbotron = props => <div className={props.className} />;
[...] 
export default class JumbotronLanding extends PureComponent {
render() {
return (
<>
<ResponsiveJumbotron className="landing-page" />
</>
)
}
}

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