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

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

1 Like
<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.

1 Like

Thanks for your response :pray:

1 Like