reactjs - 使用 JSS 覆盖 Material-ui 中的样式

Question

我有这样的html结构。

和 2 个组件

HeaderNavItem.jsx

const HeaderNavItem = ({ classes, className, children }) => (
  <div className={cn(classes.root, className)}>{children}</div>
);

export default withStyles({
  root: {
    '&:$NavLink': {
      background: 'red',
    },
  },
})(HeaderNavItem);

导航链接.jsx

const NavLink = ({
  exact, to, children, className, classes, onClick,
}) => (
  <RRNavLink to={to} exact={exact} className={cn(classes.root, className)} onClick={onClick}>
    {children}
  </RRNavLink>
);

export default withStyles(theme => ({
  root: {
    background: 'blue',
  },
}))(NavLink);

但背景仍然是蓝色的。我在浏览器控制台中收到警告：

警告：[JSS] 在 HeaderNavItem 中找不到引用的规则 NavLink。

我究竟做错了什么？