用JSS覆盖material-ui中的样式

Question

我有这样的html结构。

和2个组件

HeaderNavItem.jsx

// how long since event has passed in seconds
$secs = time() - $time_ago;

// how many seconds in a day
$sec_per_day = 60*60*24;

// days elapsed
$days_elapsed = floor($secs / $sec_per_day);

// how many seconds passed today
$today_seconds = date('G')*3600 + date('i') * 60 + date('s');

// how many seconds passed in the final day calculation
$remain_seconds = $secs % $sec_per_day;

if($today_seconds < $remain_seconds)
{
    $days_elapsed++;
}

echo 'The event was '.$days_ago.' days ago.';

NavLink.jsx

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

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

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

  

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

我做错了什么？