How to change font size and font weight dynamically in reactjs?

Issue

I am trying to change the header part of my react app dynamically.
I want a different font size, font weight, title, and subtitle for the homepage and other pages of my react web app.
This is what I want on the homepage.
Hello there should be smaller on Homepage but Welcome Back should be large

This is what I want on other pages.
Hello there should be bigger on Homepage but lorem ipsum lorem ipsum should be small

This is my code for the homepage heading

const Hero = ({ fontSize, fontWeight, title, subTitle }) => {

return (
    <div className="mt-2 mb-8">
        <p className="font-heading text-lg font-normal text-white">Hello There 👋,</p>
        <p className="font-heading text-3xl font-bold text-white">{subTitle}</p>
         // another react component
    </div>
)
}

export default Hero

I want to know how to change this code dynamically so I can use it for other pages bypassing different props for font weight, font size, title, and subtitle.
I am using react and tailwind css

Anyone Please help me with this issue.
Thank You
Edited:

{pathName === '/' ? (
                <>
                    <p className="font-heading text-lg font-normal text-white">`Hello There 👋,</p>
                    <p className="font-heading text-3xl font-semibold text-white">{subTitle}</p>
    

        </>
        ) : (
            <>
                <p className="font-heading text-3xl font-semibold text-white">Hello There 👋,</p>
                <p className="font-heading text-lg font-normal text-white">subTitle</p>
            </>
        )}

Solution

You can add in-line styling

const Hero = ({ fontSize, fontWeight, title, subTitle }) => {

return (
    <div className="mt-2 mb-8">
        <p style={{fontSize:fontSize, fontWeight:fontWeight}} className="font-heading text-lg font-normal text-white">{title}</p>
        <p className="font-heading text-3xl font-bold text-white">{subTitle}</p>
    </div>
)
}

export default Hero

and do accordingly for the other element

Edit:
Or you can pass in fontSize and fontWeight as calss names

const Hero = ({ titleFontSize,subTitleFontSize, titleFontWeight, subTitleFontWeight, title, subTitle }) => {
    
    return (
        <div className="mt-2 mb-8">
            <p className={`font-heading ${titleFontSize} ${titleFontWeight} text-white`}>{title}</p>
            <p className={`font-heading ${subTitleFontSize} ${subTitleFontWeight} text-white`}>{subTitle}</p>
        </div>
    )
    }
    
    export default Hero

Then whenever you use the component you pass those props e.g

<Hero titleFontSize="text-lg" subTitleFontSize="text-3xl" tileFontWeight="font-normal" subTitleFontWeight="font-bold" title="Title" subTitle="Sub Title" />

Or use if statement

const Hero = ({ scenario1, title, subTitle }) => {
    
    return (
        <div className="mt-2 mb-8">
            <p className={`font-heading ${scenario1 ? "text-lg font-normal" : "text-3xl font-bold"} text-white`}>{title}</p>
            <p className={`font-heading ${scenario1 ? "text-3xl font-bold" : "text-lg font-normal"} text-white`}>{subTitle}</p>
        </div>
    )
    }
    
    export default Hero

and use it like this

<Hero title="Title" subTitle="Subtitle" scenario1/> // This will render Scenario 1
<Hero title="Title" subTitle="Subtitle"/> // This will render default -in your case its Scenario 2

Answered By – That Guy Kev

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0