我有像这样的html结构 .

enter image description here

和2个组件

HeaderNavItem.jsx

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

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

NavLink.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 .

我究竟做错了什么?