只向一个组件导入CSS文件

Question

我正在呈现从API调用接收到的HTML:

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

我想这个HTML风格所以我创建了一个style.css文件,进口,我只有在这个组件但CSS适用于所有网站。

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;
}

我怎样才能只把它应用到渲染html的这个组件上呢?

谢谢

Answer 1

可以使用scss。

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;
}
}

用对应的类名将组件包装在div中:

<div class="exclusive">
<h1>John</h1>
<h2>Doe</h2>
<div>