为什么 styles 不适用于危险的SetInnerHTML

Question

i need to render some styled jsx tags in my component by using useTranslation hook and dangerouslySetInnerHTML, those tags are stored in a json file, i found that dangerouslySetInnerHTML work's fine but don't apply tailwind styles for each tag,

json file:

{
   "about-text":"<div className='text-blue px-5'><p>Text ...</p</div>",
}

inside componenets:

<div className="p-10">
<div
   dangerouslySetInnerHTML={{
      __html: t('about-text'),
    }}
   />
</div>

Answer 1

dangerouslySetInnerHTML expects to be passed a string of HTML, not a string of JSX.

The class attribute is used directly. You can't adjust the className property instead.