CODEWITHSUNDEEP
reactjsstyled-components
cubefox
cubefox

Reputation: 1301

make many styled component properties dependent on prop

I love that you can do

color: ${p=>p.active ? 'red' : 'green'}

but this syntax gets kind of out of hand for more that one property at a time

${
  p => p.active ? (
    `
      color: ${p.theme.red};
      text-decoration: underline;
    `
  ):(
  ``
  )
}

compared to the much nicer syntax for classnames

&.active{
 color: ${p => p.theme.red}
 text-decoration: underline;
}

However, setting classes conditionally is much less elegant that just setting a prop on a component. Is there a better way to accomplish this that has the advantages of both? Something like

&${p=>p.active}{
  color: ${p.theme.red}
  text-decoration: underline;
}

Upvotes: 0

Views: 71

Answers (1)

pawel
pawel

Reputation: 36965

You can define the active CSS as a separate fragment, e.g.

import styled, { css } from "styled-components";

const activeCss = css`
  color: ${p => p.theme.red};
  text-decoration: underline;
`;

const Link = styled.a`
  color:#000;
  ${ p => p.active && activeCSS }
`;

Upvotes: 1

Related Questions