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

【问题标题】：Styling(tailwind/SCSS stylesheet) not getting applied to dynamically inserted HTML in React样式（tailwind/SCSS 样式表）未应用于 React 中动态插入的 HTML
【发布时间】：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，没有迹象表明正在应用顺风样式（但内联样式有效。）

开发工具图片：

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

【问题讨论】：

标签： javascript html css reactjs tailwind-css

【解决方案1】：

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

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

【讨论】：