Javascript 如何重复使用不同颜色的react组件？

嗨，我是一个非常新的反应和编码，所以请宝贝我在你的解释

我在react中创建了一个名为Header1的组件。我使用了使用道具的动态文本，因此每次使用Header1组件时都可以更改措辞。我想知道我是如何做到这一点的风格。我想一张卡片有粉红色的文字，另一张有蓝色的文字。请帮忙！并提前向您表示感谢：）

以下是Header1组件的创建过程：

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;

从“React”导入React；
从“../img/other/whiteWorld.png”导入白色地图；
从“/_Header1.scss”导入headerCSS
const header1=（道具、风格）=>{
返回
{props.headerTitle}
{style.headerTitleS}

{props.headerDescription}

};
导出默认标题1；

以下是主App.js文件，我在其中两次使用Header1组件：

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;

 

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“./Navigation/Navigation1”导入导航1；
从“./Header/Header1”导入Header1；
从“./SaveMoney/SaveMoney1”导入SaveMoney1；
从“./机场/机场1”导入机场1；
//从“/SydneyCards/SydneyCards1”导入SydneyCards1；
从“./thingsyouldknow/thingsyouldknow1”导入thingsyouldknow1；
//从“./BucketlistCards/BucketlistCards1”导入BucketList1；
//从“./Footer/Footer1”导入页脚1；
从“./appStyles.module.css”导入样式；
类应用程序扩展组件{
render（）{
返回(
其中一种方法是使用样式，就像您在示例中尝试的那样

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

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>
  )
}

const头=（道具）=>{
返回{props.title}
}

你会把它渲染成这样

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

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>
  )
}

const-App=（）=>{
返回(
)
}

注意：您可以将CSS类作为道具而不是确切的样式对象来传递。
无需添加样式库，您可以：添加道具将样式或类名传递给Header1组件（即
）然后在Header1中呈现根div时使用这些样式或类名。另一个选项是通过道具选择要使用的颜色（即
），我可能做错了，但我在Header1创建页面的括号中添加了样式，然后完成样式={{color:'red'}在主app.js页面中，但它不起作用：（谢谢！！！！！！！！！！！！！！！！！！！！！这已经帮了很多忙！！！！！如果它解决了您的问题，您可以将其标记为解决方案@MayaWright。我很高兴它对您有所帮助