import a CSS file to only one compoenent

Question

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

Answer 1

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 class="exclusive">
  <h1>John</h1>
  <h2>Doe</h2>
<div>