CSS Modules in Nextjs: Target Html Tag from Local CSS File?

Question

I want to apply smooth scrolling only to a very specific page in nextjs (say my blog). So I am not using my globals.css file, but I need a way to inject scroll-behavior: smooth; into the html tag for specific pages only, not for my whole site.

I believe that there is a way to do this with css modules, but I do not understand how it works. Here is explained how this would work with css classes, but I don't understand how this would look like for my use case, where I try to target the html tag?

Any advice?

I tried this:

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

and this:

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

But I get:

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

Lorik · Accepted Answer · 2022-09-23 11:51:35Z

0

I found this package called Styled JSX which does exactly what you are looking for.

From this Vercel blogpost:

Styled JSX is a CSS-in-JS library that allows you to write encapsulated and scoped CSS to style your components. The styles you introduce for one component won't affect other components, allowing you to add, change and delete styles without worrying about unintended side effects.

Moreover, Styled JSX is a built-in feature of NextJS, so you can use it out-of-the-box!

Next.js includes Styled JSX by default, so getting started is as simple as adding a <style jsx> tag into an existing React element and writing CSS inside of it

You could use it like this in your case:

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

edited Sep 23, 2022 at 11:51

answered Sep 23, 2022 at 8:11

Lorik

5654 silver badges17 bronze badges

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

5 Comments

antonwilhelm Over a year ago

Thanks a lot for looking into this for me! I am already using styled components + twin.macro / tailwind and in some cases css modules, so I am reluctant to introduce another css solution. Also, I feel styled-jsx is a bit older and the Vercel / NextJS team replaced it with css modules, so it would be better for me to find a solution that uses that.

antonwilhelm Over a year ago

I also know that it should be possible to do with CSS Modules, as is shown in the link I posted. I just don't know how to apply this to my specific case with the html tag

Lorik Over a year ago

I haven't found a way to do this with CSS modules myself (I was the one who answered on your previous question), but this one package seems like an easy fix for you. It's also still being maintained (last release 14 days ago), so I wouldn't call it outdated.

antonwilhelm Over a year ago

Oh, you're right about that. Thanks for that. I will definitely look into it if I cannot solve it with CSS Modules! But I don't want to give up on CSS Modules just yet 😅

Lorik Over a year ago

Apparently Styled JSX is a built-in feature of NextJS, so you can use it out-of-the-box! From that same Vercel blogpost: "Next.js includes Styled JSX by default, so getting started is as simple as adding a <style jsx> tag into an existing React element and writing CSS inside of it"

Collectives™ on Stack Overflow

CSS Modules in Nextjs: Target Html Tag from Local CSS File?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related