styled-components.md

function with if in styled components

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
  ${() => {
    let a = 1 + 2 + 3 + 4;
    let b = a / 2;
    if (b < 6) {
      return `
      color: blue;
      background: green;
      `;
    }
  }}
`;

everything in js is possible in styled components

  font-size: ${2 + 0.5 + "em"};

props

background: ${({type}) => (type === 'cancel' ? 'tomato' : 'indigo')}