如何在 JSX 中使用样式标签答案

【问题标题】：How can I use style tag in JSX如何在 JSX 中使用样式标签
【发布时间】：2021-07-25 20:15:45
【问题描述】：

所以我处于必须使用<style> 标签的情况，那是因为我有多个页面（我正在使用反应路由器 DOM）所以我不能将相同的样式应用于每个页面，因为那样会混乱事情起来了。有没有办法在 JSX 中使用 <style> 标签？

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

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

【问题讨论】：

【解决方案1】：

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

import './main.css'

另一个解决方案是使用 Emotion 和 Global 组件： https://emotion.sh/docs/globals

【讨论】：

【解决方案2】：

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

import './RandomScreen.css';

【讨论】：