CODEWITHSUNDEEP
reactjsnext.jsstyled-jsx
user1941537
user1941537

Reputation: 6685

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

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?

Upvotes: 1

Views: 1039

Answers (1)

Kamrul Islam
Kamrul Islam

Reputation: 265

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

Upvotes: 0

Related Questions