如何在 CSS 模块（React）中定义对 CSS 类？答案

【问题标题】：How do I define pair CSS class in CSS module (React)?如何在 CSS 模块（React）中定义对 CSS 类？
【发布时间】：2020-06-28 03:01:14
【问题描述】：

          <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 类定义为：

.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 > * 似乎也不起作用...

【问题讨论】：

标签： css reactjs react-css-modules

【解决方案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;
}

【讨论】：