Saya memiliki aplikasi React yang sekarang memiliki dua rute (halaman arahan utama dan halaman karir).

Saya membuat satu komponen JumbotronResponsive yang dapat digunakan kembali dan saya merender komponen tunggal itu sebagai anak di bawah komponen JumbotronLanding (untuk halaman arahan) dan sebagai anak di bawah komponen JumbotronCareer (untuk halaman karier).

Seperti ini

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

export default class JumbotronCareer extends PureComponent {

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


dan ini

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

export default class JumbotronLanding extends PureComponent {

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

Seperti yang Anda lihat komponen induk tersebut memiliki gaya di mana saya ingin menata beberapa bagian ResponsiveJumbotron.
Misalnya saya ingin ukuran font jumbotron di halaman arahan menjadi 70px dan di halaman karir menjadi 45px.
Tetapi ketika saya beralih di antara rute, gaya-gaya itu seperti dalam satu file CSS.
Pertanyaannya adalah 'bagaimana memisahkan mereka satu sama lain?'.

0
Daniel Movsesyan 7 Agustus 2019, 15:12

1 menjawab

Jawaban Terbaik

Anda dapat menambahkan properti className dan di ResponsiveJumbotron Anda menggunakannya seperti

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

[...] 

export default class JumbotronLanding extends PureComponent {

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

Dan Anda dapat menggunakan kelas css itu di lembar gaya Anda

0
Gary 7 Agustus 2019, 12:19