Jump to content
Search Community

Selecting class via Sass Modules Next.js

jnemec test
Moderator Tag

Recommended Posts


I've been getting the hang of using GSAP with Next.js, but I had a question about getting a class name by scoping. Is there a way I can select the "styles.content" class without having to add in a regular css class ("content") to be able to select it?

import React, { useRef, useLayoutEffect } from 'react'

import { SanityImageDiv } from '../../../../layout/shared'

import { heroAnimate } from '../animate/animate'
import { gsap } from 'gsap'

import styles from './hero.module.scss'

const Hero = ({
  media = [],
  sectionID = { current: '' },
}) => {
  const sectionRef = useRef(null)

  // GSAP
  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      const sectionContent = document.querySelector('.content')
    return () => ctx.revert()
  }, [])

  return (
    <section id={sectionID.current} className={styles.section} ref={sectionRef}>
      {media.map((item) =>
        item?._type === 'image' ? (
            <div className={`content ${styles.content}`}>
              <h2 className={styles.heading}>{heading}</h2>
              <p className={styles.body}>{body}</p>
              <div className={styles.buttons}>
                {buttons?.map((button) => (
        ) : (
          <div key={item._key}>Unsupported file type</div>

export default Hero


Link to comment
Share on other sites



Unfortunately there’s no way as far as I know. CSS modules are there to scope classes in order to prevent class names collisions.


But keep in mind that GSAP Context has scoping built into it, so in your case all you have to do is pass sectionRef as the scope and any selector you use will be scoped to that ref so you’ll avoid selecting any element that has the same class name elsewhere in your application. So passing a custom class the way you’re doing it right now should work.


In order to pass the scope into GSAP Context just do this

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    const sectionContent = gsap.utils.toArray('.content'))
  }, sectionRef)//  <- Scope
  return () => ctx.revert()
}, [])

That should create an array of the content elements inside the ref and not select any other that’s outside.


Hopefully this helps.
Happy  Tweening!

  • Like 1
Link to comment
Share on other sites

  • 5 weeks later...


I use GSAP with css modules and to avoid adding extra classes, i use css attribute selector like this :

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    const sectionContent = gsap.utils.toArray('[class*="content"]'))
  }, sectionRef)
  return () => ctx.revert()
}, [])

So, the scoped class is enough : 
<div className={`${styles.content}`}>

I hope this helps.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...