如何在 CSS 模块 (React) 中定义对 CSS class？

Question

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

在上面的代码中，我在 x.module.scss 文件中将 navlink class 定义为：

.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

如果您正在使用 class 模块，请将其用作 class 模块

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

如果你想正常使用它class，那么使用:global()

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

如何在 CSS 模块 (React) 中定义对 CSS class？

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

css

reactjs

react-css-modules