How to use css class from global css file declared inside _app.js (Next.js)

Question

Pretty much as title..

I declared my global styles.css inside _app.js as follow:

import '../public/styles.css'

then inside a page header.js (/components/header.js) i'm using a class .buttonPrimary present inside above mentioned global css file, as follow:

          <a
            href={`/api/auth/signin`}
            className={buttonPrimary}    // THIS
            onClick={(e) => {
              e.preventDefault()
              signIn()
            }}
          >
            Sign in
          </a>

but it throws error that the class doesn't exists.. I know I could do an import at the top of the page of the same global css file, but what would be the point of loading it globally inside _app.js then?

xom9ikk · Accepted Answer · 2020-12-20 16:26:08Z

2

Try to just use the class as a string

 <a
  href={`/api/auth/signin`}
  className="buttonPrimary"
  onClick={(e) => {
    e.preventDefault()
    signIn()
  }}
>
  Sign in
</a>

Your bundler will connect the css file to the final bundle, and react will render. As a result we get html:

<a href="/api/auth/signin" class="buttonPrimary">Sign in</a>

answered Dec 20, 2020 at 16:26

xom9ikk

2,3095 gold badges22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Patryk Wojcieszak · Accepted Answer · 2020-12-20 16:30:21Z

0

You need to pass the className as a string

<a
 href={`/api/auth/signin`}
 className="buttonPrimary"
 onClick={(e) => {
  e.preventDefault()
  signIn()
 }}
 >
 Sign in
</a>

answered Dec 20, 2020 at 16:30

Patryk Wojcieszak

1332 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to use css class from global css file declared inside _app.js (Next.js)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related