如何在JSX中使用样式标记

Question

所以我必须使用<style>标记，这是因为我有多个页面(我使用的是react router DOM(，所以我不能对每个页面应用相同的样式，因为这会把事情搞砸。有没有一种方法可以在JSX中使用<style>标签？

我必须使用这样的样式标签：

function RandomScreen(){
return (
<div>
<style></style>
</div>
)
}

Answer 1

您可以简单地将样式表导入页面：

import './main.css'

另一个解决方案是使用情绪和全局组件：https://emotion.sh/docs/globals

Answer 2

您可以为每个组件使用单独的css文件，并导入所需的每个组件中的每个css文件吗。

import './RandomScreen.css';