Styling with global classnames about aphrodite HOT 2 CLOSED

Aphrodite class names shouldn't interact with other external class names. Are you talking about the React Router Link component? It looks like it does concatenation to generate classes, which isn't going to work with Aphrodite. It shouldn't be too hard to make a version of Link that does work with Aphrodite: AphroditeLink.jsx which you'd use like:

<AphroditeLink to={...} style={styles.link} activeStyle={styles.linkActive}>
    Text
</AphroditeLink>

const styles = StyleSheet.create({
    link: {
        color: "black",
    },

    linkActive: {
        color: "red",
    },
});

from aphrodite.

I'm dealing with this same issue. I'm mainly running into problems with applying a cursor: pointer to Links, but changing colors on hover seems to work.

Thanks for posting the AphroditeLink.

I guess the downside is you would have to make sure you keep your custom <AphroditeLink /> up-to-date as react-router's link changes (although it seems to be more stable at the time I am writing this).

I may just add a style to my scss as I want a pointer on 100% of content wrapped in Link (so far at least).

from aphrodite.