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

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?

CodePudding user response：

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>
   )

CodePudding user response：

Try this:

<Layout>
    more code goes here
    <style global jsx>{`${stylesheet} ${secondStylesheet}`}</style>
</Layout>

You can also do this:

import "./style1.scss";
import "./style2.scss";

and without using <style global jsx></style>

Working CodeSandbox.