在样式html属性中直接使用顺风属性

Question

如何在html属性的样式中直接使用尾风特性？

function App() {

    return (
        <div style={'bg-gray-400 w-full h-screen p-10'}>
            <SideMenu />
        </div>
    );
}

export default App;

上面的例子是我尝试过的，但是style={'bg-gray-400 w-full h-screen p-10'}无效，我想在样式道具或任何js自定义组件中使用它来注入/修改html。

注意:我知道我们通常使用className来使用顺风css属性，但是当我们必须使用样式属性来添加css时，有一些确定的用例。框架运动的变体就是一个例子。

Answer 1

您应该能够将顺风样式作为一个类放置，它们不需要在样式标记中。如果它不起作用，我会在执行这段代码之前在某个地方做一个白名单，以便可以编译它们。

<div class='bg-gray-400 w-full h-screen p-10'>
    <SideMenu />
</div>