How do I define pair CSS class in CSS module (React)?

Question

          <NavLink
            to={rootPath + path}
            activeClassName="active"
            className={scss.navlink}
          >
            <ListItem button key={name}>
              <ListItemIcon>
                <Icon htmlColor="#E1F5FE" />
              </ListItemIcon>
              <ListItemText primary={name} />
            </ListItem>
          </NavLink>

In the above code I defined navlink class in my x.module.scss file as:

.navlink {
  color: inherit;
  text-decoration: none;
}

.navlink:hover,
.navlink:active,
.navlink:visited {
  text-decoration: none;
}

/* Styling for when the link is active */
.navlink.active {
  background-color: #039BE5;
}

Notice .navlink.active does not actually work as *imported_class_navlink active in react.

What can I do to allow .navlink.active to work?

Also .navlink > * doesn't seem to work either...

Answer 1

If you're using class modules, use it as class modules

          <NavLink
            to={rootPath + path}
            activeClassName={scss.active}
            className={scss.navlink}
          >
            <ListItem button key={name}>
              <ListItemIcon>
                <Icon htmlColor="#E1F5FE" />
              </ListItemIcon>
              <ListItemText primary={name} />
            </ListItem>
          </NavLink>

If you want to use it as normal class, then use :global()

.navlink:global(.active) {
  background-color: #039BE5;
}