I'm rendering HTML received from an API call like this :
{props.content &&
<div className="container-HTMLContent">
{textToDisplay && <div dangerouslySetInnerHTML={{ __html: textToDisplay }} className="my-4"></div>}
<button onClick={() => setIsOpen(!isOpen)} className="underline">{isOpen ? "Voir moins" : "Lire la suite "}</button>
</div>
}
I'd like to style this HTML so I created a style.css file, and I imported it ONLY in this component but the CSS applies to all the website.
Example of css :
h1 {
border: 3px solid red;
font-weight: 800 !important;
font-size: 1.7rem !important;
line-height: 1.2 !important;
}
h2 {
font-weight: 700 !important;
font-size: 1.6rem !important;
line-height: 1.2 !important;
}
How can I apply it to only this component that renders the html ?
Thank you
CodePudding user response:
You can do that by using scss.
Example of your SCSS:
.exclusive {
h1 {
border: 3px solid red;
font-weight: 800 !important;
font-size: 1.7rem !important;
line-height: 1.2 !important;
}
h2 {
font-weight: 700 !important;
font-size: 1.6rem !important;
line-height: 1.2 !important;
}
}
Wrap your component inside a div with the corresponding classname:
<div >
<h1>John</h1>
<h2>Doe</h2>
<div>