Selectors in CSS/JS not working as expected
gear4s opened this issue · comments
Aaron Marais commented
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.