css 如何在reactjs中动态更改字体大小和字体粗细？

h43kikqp 于 2022-11-27 发布在 React

关注(0)|答案(3)|浏览(357)

我正在尝试动态更改react应用的页眉部分。我希望react web应用的主页和其他页面使用不同的字体大小、字体粗细、标题和副标题。这就是我希望主页上使用的内容。Hello there在主页上应该较小，但Welcome Back应该较大

这是我想在其他页面上。你好那里应该在主页上更大，但lorem ipsum lorem ipsum应该是小

这是我的主页标题代码

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

我想知道如何动态地改变这段代码，这样我就可以在其他页面中使用它，绕过字体粗细、字体大小、标题和副标题的不同属性。我使用的是react和tailwind css
任何人请帮助我解决这个问题。谢谢编辑：

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

css

来源：https://stackoverflow.com/questions/66529868/how-to-change-font-size-and-font-weight-dynamically-in-reactjs

3条答案

按热度按时间

ttcibm8c1#

可以添加内嵌样式

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

并相应地对另一个元素进行处理
编辑：或者你也可以将fontSize和fontWeight作为类名传递

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

然后，每当你使用组件时，你传递这些道具，例如

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

或使用if语句

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

像这样使用

<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

赞(0）回复(0）举报 2022-11-27

esbemjvw2#

我编辑我的答案
请检查以下内容：

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

赞(0）回复(0）举报 2022-11-27

dzhpxtsq3#

我们可以按className动态显示它

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

赞(0）回复(0）举报 2022-11-27

我来回答

css 如何在reactjs中动态更改字体大小和字体粗细？

3条答案

相关问题

热门标签

最新问答