How to Target HTML Tags Locally using CSS Modules in Next.js?

Question

How to Target HTML Tags Locally using CSS Modules in Next.js?

I am looking to implement smooth scrolling specifically on one page in my Next.js application, such as my blog. Instead of applying it to the entire site through the globals.css file, I need a way to inject scroll-behavior: smooth; into the html tag only for certain pages.

I've heard that this can be achieved using CSS modules, but I'm unsure of how to do it. I came across an explanation on how to target css classes for this purpose here, but I'm unclear on how to apply it to the html tag in my scenario.

Any guidance or suggestions would be greatly appreciated!

I have attempted the following:

.foo :global {
  html {
    scroll-behavior: smooth;
  }
}

and also this:

html :global {
  .foo {
    scroll-behavior: smooth;
  }
}

However, I encountered the following error:

Syntax error: Selector "html :global" is not pure (pure selectors must contain at least one local class or id)

javascript css next.js css-modules react-css-modules

Answer 1

Answer №1

After some research, I stumbled upon a fantastic tool known as Styled JSX, which seems to be the perfect solution for your needs.

According to a blog post on Vercel's website:

Styled JSX is a CSS-in-JS library that allows you to write isolated and scoped CSS to style your components. This means that any styles applied to one component won't affect others, giving you the freedom to modify styles without causing unintended consequences.

In addition, Styled JSX comes pre-installed with NextJS, making it incredibly easy to implement!

Next.js already has Styled JSX integrated, so all you need to do is insert a <style jsx> tag within your React element and start writing your CSS inside it.

You can incorporate it into your project like this:

function BlogPage() {
  return (
    <div className="container">
      <h1>Example Blog Post</h1>
      <p>Hello! Welcome to my blog post!</p>
      <style jsx>{`
        html {
          scroll-behavior: smooth;
        }
      `}</style>
    </div>
  );
}

Answer 2

After some research, I stumbled upon a fantastic tool known as Styled JSX, which seems to be the perfect solution for your needs.

According to a blog post on Vercel's website:

Styled JSX is a CSS-in-JS library that allows you to write isolated and scoped CSS to style your components. This means that any styles applied to one component won't affect others, giving you the freedom to modify styles without causing unintended consequences.

In addition, Styled JSX comes pre-installed with NextJS, making it incredibly easy to implement!

Next.js already has Styled JSX integrated, so all you need to do is insert a <style jsx> tag within your React element and start writing your CSS inside it.

You can incorporate it into your project like this:

function BlogPage() {
  return (
    <div className="container">
      <h1>Example Blog Post</h1>
      <p>Hello! Welcome to my blog post!</p>
      <style jsx>{`
        html {
          scroll-behavior: smooth;
        }
      `}</style>
    </div>
  );
}

How to Target HTML Tags Locally using CSS Modules in Next.js?

Answer №1

Similar questions

Utilizing a custom filter for object manipulation within Vuetify's v-autocomplete

Asynchronous JavaScript combined with a for loop

Need help resolving the issue of retrieving feed error in Angular?

Preserve dropdown selections in JavaScript even when the page is refreshed

Displaying a dynamic menu using Angular's ngFor loop

Achieve a div to fill the remaining width while using list-style-position: inside

I can see the JSON data printing to the console in Ionic 3, but it doesn't display on

vuejs function for modifying an existing note

Simply click on the image to open it in a lightbox view with a thumbnail using jQuery

The name field in the request body is currently undefined

AngularJS creates a new window in your application

I'm currently working with ReactJS and attempting to retrieve JSON data from a REST API in JIRA, but I'm facing challenges in achieving this

I am puzzled as to why it is searching for an ID rather than a view

CSS showcase of a minimalist image gallery

Every time I use my NodeJS MySQL Query function, the results I get are never

What are some effective ways to align an image to the left and text to the right within a table

In JavaScript, the function yields a proxy rather than an object

Strange behavior observed in fading slides using jQuery

Preventing the upload of empty images in an angular application

"Obtaining Google locations within a modal box - a step-by-step