Next.js - 在组件中使用多个全局样式答案

【问题标题】：Next.js - Using more than one global style in a componentNext.js - 在组件中使用多个全局样式
【发布时间】：2022-01-10 22:53:37
【问题描述】：

在我的 Next.js 项目中，我有一个组件，它只导入一个 CSS 文件，如下所示：

import stylesheet from '../src/styles/first.scss';

它是这样使用的：

return (
  <Layout>
    <style global jsx>{stylesheet}</style>
    more code goes here
  </layout>

现在我需要在我的组件中导入第二个 CSS 文件，如下所示：

import secondStylesheet from '../src/styles/second.scss';

但是如何使用第二个 CSS？我尝试了以下方法，但没有成功：

return (
  <Layout>
    <style global jsx>{stylesheet, secondStylesheet}</style>
    more code goes here
  </layout>

与：

return (
  <Layout>
    <style global jsx>{stylesheet}</style>
    <style global jsx>{secondStylesheet}</style>
    more code goes here
  </layout>

有什么帮助吗？

【问题讨论】：

标签： reactjs next.js styled-jsx

【解决方案1】：

看起来你可以使用而不是尝试将代码放在你的样式 jsx 之前

    return (
  <Layout>
    more code goes here
    <style global jsx>{stylesheet}</style>
    <style global jsx>{secondStylesheet}</style>
  </Layout>
   )

【讨论】：