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，而职业页面上的jumbotron字体大小为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类

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

1 个答案: