Utilizing CSS classes from a global CSS file defined in _app.js (Next.js) - A guide

Just like the title says...

I have included my global styles.css in _app.js as shown below:

import '../public/styles.css'

Then, within a page's header.js (/components/header.js), I am trying to use a class .buttonPrimary from the global css file mentioned above, like this:

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

However, I am getting an error saying that the class does not exist... I understand that I could simply import the same global css file at the top of the page, but then what is the purpose of loading it globally in _app.js?

cssnode.jsreactjsnext.js

Answer №1

It is recommended to keep the class as a string

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

Your bundler will link the css file to the final bundle, and react will handle the rendering. This produces the following html output:

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

Answer №2

Ensure that the className is passed as a string

<a
 href={`/api/auth/login`}
 className="btnPrimary"
 onClick={(e) => {
  e.preventDefault()
  login()
 }}
 >
 Log in
</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When utilizing prompt() in React, the issue arises where the page continues to refresh

Being a newcomer to React, I decided to create a very basic project that utilizes the "prompt()" function in JavaScript to gather a user's age and then displays it using React. By clicking on the "Change Age" button, you can modify the displayed age b ...

javascriptreactjs

Configuring Node.js and express.js for my personal website to showcase my projects

I am new to node.js and I'm excited to implement it on my personal website as a way to start learning. I have successfully set up the node server, but I am struggling with setting up routing using express.js. All my files are typical static files like ...

htmlnode.jsexpress

Create a layout consisting of two rows, each containing three blocks. Ensure that the layout is responsive by using only HTML and CSS, without relying

Hello there! I am looking to create a responsive layout without using bootstrap or any other framework..... I want to build it from scratch. https://i.stack.imgur.com/GAOkh.png I am aiming for responsive blocks that collapse into one column when the page ...

htmlcss

Please ensure that all fields in the form are filled out before clicking the enable button

Is it possible to enable the button only when all fields are filled out in a form? It's easy if there's just one field, but I have multiple fields with a select field as well. I'm not sure how to do this. Here's the form I've creat ...

javascriptreactjsmaterial-ui

Adding Space Before Bullet Points in HTML: A Quick Guide

Is there a way to add space before bullet points? My requirements are as follows: This is paragraph 1 The first text line The second text line This is paragraph 2 The first text line The second text line I would greatly appreciate any ...

htmlcss

Setting up PhalconPHP and Node.js configurations

Is there a way to merge configurations for PHP and JavaScript, considering they both interact with the same database? How can these be organized cleanly? Additionally, what file structure would be best for an application utilizing PhalconPHP and Express. ...

node.jsexpressphalcon

Searching for Mongoose documents based on values within an array

I am facing a challenge with the following code snippet, which is intended to retrieve all blogs with an author ID equal to the ID of the first administrator (orgAdmin) in an array: let officialBlogs = await Blog.find().where('author.id').equals( ...

node.jsmongodbmongoose

What is the best way to reduce the height of the navbar in Bootstrap 4?

Check out my code snippet for implementing Bootstrap 4: <nav class="navbar navbar-collapse navbar-toggleable-md navbar-light bg-faded "> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav mr-auto"> ...

cssbootstrap-4twitter-bootstrap-4

Ways to eliminate line breaks and <br> tags in text using only CSS to create a button that trunc

I am currently working on incorporating a truncated text button using only CSS. The issue I'm facing is that the "show more" button doesn't ignore the line breaks or any other relevant HTML within the teaser and text body. This is causing too muc ...

htmlcsscheckboxlabeltruncate

Superfish z-index problem in Internet Explorer 7

Struggling to resolve the z-index problem with IE7 for superfish. Check out this Jsfiddle example All I want is for the menu to appear on top of the background font, not the other way around. I've attempted adding z-index to both sh-menu classes an ...

jquerycssinternet-explorer-7superfish

What is the best way to bring a list from one .js file into my main.js file?

Here is a demonstration using Ania Kubow's Climate change API. My query is: I have a lengthy list similar to this one, and I would like to store it in a separate file named "exampleList.js" and then import it into my main.js file. const newspapers = ...

javascriptnode.jsexpressaxios

Is Yarn 2.0's zero-install approach better suited for production or development deployments?

Our team is currently transitioning from yarn 1.x to yarn 2 (yarn 3.1.1) and I'm feeling a bit lost when it comes to configuring yarn in our CI/CD setup. Our current pipeline for deploying to our Kubernetes cluster looks like this: On Pull Request br ...

dockerkubernetesnext.jsyarnpkgcicd

What is the best way to navigate to an active item within a list in React, especially when the list itself has overflow enabled but its parent element has overflow set to

I am facing an issue with a React component that contains numerous subcomponents. Specifically, I have a list within this component that has an overflow property set to auto. However, the parent element of this list has the property overflow: hidden; My c ...

javascriptreactjs

Adjust the heights of certain headers in an HTML table, not all of them

Here is the link to my JSBin: https://jsbin.com/xofaco/edit?html,css,output I am facing an issue with an HTML table that has both nested headers and regular headers. My goal is to make all headers equal in height, specifically I want columns labeled "four ...

htmlcsshtml-table

What kind of GWT component features both a Button and text?

I am looking to develop a customized GWT widget that consists of a rectangular div element resembling a button, accompanied by text positioned adjacent to it. My goal is to enable the selection of this widget so that clicking on either the div/button or th ...

javacssbuttongwtlabel

Whenever trying to access `req.body` in Node.js, it appears to be an object initially, but strangely

Integration of expressjs, NodeJs, and Mongodb After logging req.body in the console, it shows up as [object Object]. However, when I log req.body.name, it returns undefined. The data is being sent via POST method using POSTMAN with the following format: { ...

node.jsmongodbexpress

Exploring the Power of Destructuring Results in React.js with Apollo

I have been exploring the Apollo client for my project, and I encountered an issue with two of my query functions. The first query, which retrieves a list of users, is working perfectly fine. However, I am struggling to understand why my second simple quer ...

javascriptreactjsapollo-client

Implementing dynamic enable/disable functionality on React Select components using Material UI

I need help figuring out how to change the disabled attribute in a select element on button click within a React application using Material UI. Here is my button code: <AsistButton variant="outlined" color="primary" className={classes.button}>X</ ...

reactjsmaterial-ui

Leveraging server-side capabilities with Express.js and EJS

Currently, I am testing an app in Express.js using EJS as the templating engine. My goal is to access functions stored in a .js file for server-side execution instead of client-side processing. To illustrate this, consider the following examples: <%= c ...

node.jsexpressejs

Tips for creating various instances of a single type within mock data

In my Schema.js, I have a simple schema and server setup: const typeDefs = gql` type Query { people: [Person!]! } type Person { name: String! age: Int! job: String } `; And here is my server configuration: const mocks = { Person ...

javascriptnode.jsgraphqlapollo