how do i reuse a react component but with different colours?

Question

Hi I am very new to react and coding so please baby me in your explanations.

I have created a component in react named Header1. I have used dynamic text using props so I can change the wording for each time I use the Header1 component. I am wondering how do I do that for the style. I would like one card to have pink text and another to have blue text. Please help! And thank you in advance :)

The following is the creation of the Header1 component:

import React from 'react';
import WhiteMap from '../img/other/whiteWorld.png';
import HeaderScss from './_Header1.scss'

const header1 = (props, style)=>{
    return   <div className="main--container">
                        <header className="header--container__inside">
                        <section className="header--container__left">
                                <h1>
                                    {props.headerTitle} 
                                    {style.headerTitleS}
                                </h1>
                                <p>
                                    {props.headerDescription} 
                                </p>
                        </section>
                        <section className="header--container__right">
                            <div className="header--pic">
                                <img src={WhiteMap} alt="World map with a circle highlighting Australia"/>
                            </div>
                        </section>
                        </header>
                </div>
};

export default header1;

The following is the main App.js file where I am using the Header1 component twice:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Navigation1 from './Navigation/Navigation1';
import Header1 from './Header/Header1';
import SaveMoney1 from './SaveMoney/SaveMoney1';
import Airports1 from './Airports/Airports1';
// import SydneyCards1 from './SydneyCards/SydneyCards1';
import ThingsYouShouldKnow1 from './ThingsYouShouldKnow/ThingsYouShouldKnow1';
// import BucketList1 from './BucketlistCards/BucketlistCards1';
// import Footer1 from './Footer/Footer1';
import styles from './appStyles.module.css';







class App extends Component {
  render() {
    return (
      <div className="App">
        <Navigation1 />
        <Header1 headerTitle="Fly to" headerDescription=" Selia."/>
        <SaveMoney1/>
        <Airports1/>
        <Header1 headerTitle="Things you should know" headerDescription ="Based on customer bookings,
        {/* <BucketList1/> */}
        {/* <SydneyCards1/> */}
        {/* <Footer1/> */}
      </div>
    );
}
}
export default App;

 

Answer 1

One of the ways would be using styles, like you're trying to do in your example. Try to do something like this

const Header = (props) => {
  return <h1 style={props.style}>{props.title}</h1>
}

And you would render it like this

const App = () => {
  return (
    <div>
      <Header title="My Header with Blue text" style={{color: "blue"}} />
      <Header title="My Header with Red text" style={{color: "red"}} />
    </div>
  )
}

Note: You can do the same passing a CSS class as a prop instead of the exact style object.