2

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)

antonwilhelm
  • 5,768
  • 4
  • 19
  • 45

1 Answers1

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>
  );
}
Lorik
  • 438
  • 2
  • 9
  • 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 Sep 23 '22 at 08:15
  • 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 – antonwilhelm Sep 23 '22 at 08:16
  • 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. – Lorik Sep 23 '22 at 08:19
  • 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 – antonwilhelm Sep 23 '22 at 08:22
  • 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 ` – Lorik Sep 23 '22 at 11:50