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
enter image description here

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

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

Leave a Reply

(*) Required, Your email will not be published