样式（tailwind/SCSS 样式表）未应用于 React 中动态插入的 HTML

Posted 2023-03-06

【中文标题】样式（tailwind/SCSS 样式表）未应用于 React 中动态插入的 HTML

【英文标题】：Styling(tailwind/SCSS stylesheet) not getting applied to dynamically inserted HTML in React

【发布时间】：2021-07-27 18:59:29

【问题描述】：

我有一个使用 typescript、scss 和 tailwind 的 React 应用程序。 Tailwind 运行良好，Sass 也是如此。 当我尝试将 html 从useEffect 钩子插入div 时，问题就出现了。

HTML：

<main className='mx-20 mt-12 text-gray-600'>
    <div ref=mdContainerRef></div>
</main>

useEffect及其他相关代码：

    const mdContainerRef = useRef<null | HTMLDivElement>(null);

    useEffect(() => 
            if (mdContainerRef.current) 
                mdContainerRef.current.innerHTML = '<p className="text-8xl bg-green-600">Test</p>';
            

            setArticle(data);
        )();
    , [slug, mdContainerRef]);

tailwind 类作用于渲染 HTML 等其他内容（从函数返回，例如：main 元素）。

我检查了 chrome 上的 devtools，没有迹象表明正在应用顺风样式（但内联样式有效。）

开发工具图片：

如果您需要任何其他详细信息，请告诉我，提前谢谢！！！

【参考方案1】：

您在 react 生态系统之外插入 html 元素，因此您需要使用 class 而不是 className

mdContainerRef.current.innerHTML = '<p class="text-8xl bg-green-600">Test</p>';