Next.js - Using more than one global style in a component

Question

In my Next.js project, I have a component which is importing only one CSS file like this:

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

And it's used like this:

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

Now I need to import a second CSS file in my component like this:

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

But how can I use the second CSS? I tried the followings but it didn't work:

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

AND:

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

Any help please?

Answer 1

Looks like Can you r using instead of and try putting code before your style jsx's

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