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

Question

在我的 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>

请问有什么帮助吗？

Answer 1

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

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