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

[rishipurwar007]

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

[DanCouper]

<div style={{ fontSize: someVariable, fontWeight: someVariable }} className="some classes here">

That’s just a JS object, and it’s inline HTML styles, and inline styles override CSS in HTML/CSS

Or

<div className={ "some classes here" + "maybe some more classes"} >

className is just a string, so you just build a string however you want using JS, you just need to make sure there are spaces between the class names in the string.

[rishipurwar007]

Thanks for your response