Using styled-components with react-router

react-router’s <Link> component and react-modal2’s <Modal> component accept additional classNames via separate properties. e.g. <Link> accepts activeClassName and <Modal> accepts backdropClassName and modalClassName. It would be great to have a way to style these using styled-components. Perhaps we could have something like:

const StyledLink = styled(Link)`
  color: palevioletred;
  display: block;
  margin: 0.5em 0;
  font-family: Helvetica, Arial, sans-serif;

  &:hover {
    text-decoration: underline;
  }
  &.active {
    color: red;
  }
`;

where &.active gets passed as a separate class name to the activeClassName property.

[mikehazell]

FWIW, this is working for me.

import { Link } from 'react-router';
import styled from 'styled-components';

const NavItem = styled(Link)`
  background-color: blue;

  &.${(props) => props.activeClassName} {
    background-color: paleturquoise;
  }
`;

NavItem.defaultProps = {
  activeClassName: 'active',
};

export default NavItem;

[geelen]

Ah I see yeah I misread &.active as &:active in the original example. To be honest, I actually think turning &.active into activeClassName is really clever, but it’s already a valid thing to do so I don’t want to overload it.

I suppose you could do &:pass-as-prop(activeClassName) { ... } or something else wacky like that. But tbh that’s starting to put a lot of magic in there for an API that… is kinda clunky.

IMO React Router could add a data-active attribute instead of applying a different classname, then we could do:

const StyledLink = styled(Link)`
  color: palevioletred;
  display: block;
  margin: 0.5em 0;
  font-family: Helvetica, Arial, sans-serif;

  &[data-active] {
    color: red;
  }
`;

Lol, actually you can do this:

const rando = btoa(Math.random())
const StyledLink = styled(Link)`
  color: palevioletred;
  display: block;
  margin: 0.5em 0;
  font-family: Helvetica, Arial, sans-serif;

  &.${rando} {
    color: red;
  }
`;
<StyledLink activeClassName={rando}/>

😂