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

Question

我有一个使用 typescript、scss 和顺风的 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]);

顺风类适用于其他内容，如渲染 HTML（从 function 返回，例如： main元素）。

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

开发工具的图像：

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

Answer 1

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

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