styled components conditional styling code example

Example 1: conditionally changing styled components based on props

const Text = styled.p`
  color: ${(props) => (props.red ? 'red' : 'blue')};
`

Example 2: styled components conditional hover

import { css, styled } from 'styled-components'

styled.div`
   ${props => props.shouldHover && css`
      &:hover {
        background: 'red';
      }
   `}
`