Как определить класс пары CSS в модуле CSS (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>

В приведенном выше коде я определил класс navlink в моем файле x.module.scss как:

.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;
}

Примечание .navlink.active на самом деле не работает как *imported_class_navlink active в реакции.

Что я могу сделать, чтобы .navlink.active заработал?

Также .navlink > * тоже не работает ...

Answer 1

Если вы используете модули класса, используйте его как модули класса

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

Если вы хотите использовать его как обычный класс, используйте :global()

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