如何在 JSX 中使用樣式標簽

Question

所以我處於必須使用<style>標簽的情況，那是因為我有多個頁面（我正在使用反應路由器 DOM），所以我不能將相同的樣式應用於每個頁面，因為那樣會搞砸。 有沒有辦法可以在 JSX 中使用<style>標簽？

我必須使用這樣的樣式標簽：

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

Answer 1

您可以簡單地將樣式表導入您的頁面：

import './main.css'

另一種解決方案是使用 Emotion 和 Global 組件： https://emotion.sh/docs/globals

Answer 2

您能否為每個組件使用單獨的 css 文件並在您需要的每個組件中導入每個 css 文件。

import './RandomScreen.css';