Selectors in CSS/JS not working as expected

[Aaron Marais]

I'm using Aphrodite as my renderer:

import React from "react"
import { Switch, Route } from "react-router-dom"

import WithStylesContext from "react-with-styles/lib/WithStylesContext"
import AphroditeInterface from "react-with-styles-interface-aphrodite"

import theme from "./theme"
import Header from "./header"
import HomePage from "../pages/home"

export default () => {
  return (
    <WithStylesContext.Provider value={{
      stylesInterface: AphroditeInterface,
      stylesTheme: theme,
      direction: "LTR"
    }}>
      <Header />
      <Switch>
        <Route path="/" component={HomePage} />
      </Switch>
    </WithStylesContext.Provider>
  )
}

My CSS:

import withStyles from "react-with-styles"
import Component from "./component"

export default withStyles(({color}) => ({
  links: {
    color: color.primary,
    "& a:not(:last-child)": {
      padding: "10px",
      marginRight: "1px solid #000000"
    },
    "& a:active": {
      color: color.primary
    }
  }
}))(Component)

How I use in component:

import React from "react"

export default ({styles, css}) => {
  return (
    <>
      <div {...css(styles.links)}>
        <a href="/">Link 1</a>
        <a href="/">Link 2</a>
        <a href="/">Link 3</a>
      </div>
    </>
  )
}

Problem: my A links do not appear to be getting styles, required for the linking.