How to Use Conditional Rendering in Styled Components

Styled-components is a popular CSS-in-JS library that allows you to write CSS directly inside JavaScript files. One of its powerful features is conditional rendering, where styles can change dynamically based on component props or state.

Why Use Conditional Rendering in Styled Components?

Helps in dynamic styling based on user interactions.
Keeps styles modular and scoped.
Improves maintainability by avoiding unnecessary class toggling.

Basic Example of Conditional Rendering

Let's start with a simple button component that changes background color based on its active state:

import React, { useState } from 'react'
import styled from 'styled-components'

const Button = styled.button`
  width: 150px;
  height: 50px;
  border: none;
  cursor: pointer;
  background-color: ${({ active }) => (active ? 'blue' : 'gray')};
  color: white;
  font-size: 16px;
  transition: background-color 0.3s ease;
`

const App = () => {
  const [active, setActive] = useState(false)

  return (
    <Button active={active} onClick={() => setActive(!active)}>
      {active ? 'Active' : 'Inactive'}
    </Button>
  )
}

export default App

Using Multiple Conditional Styles

You can conditionally apply multiple styles using template literals and css helper from styled-components:

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

const Button = styled.button`
  width: 150px;
  height: 50px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;

  ${({ primary }) =>
    primary &&
    css`
      background-color: blue;
      color: white;
    `}

  ${({ disabled }) =>
    disabled &&
    css`
      background-color: lightgray;
      cursor: not-allowed;
    `}
`

Now, when you use <Button primary /> or <Button disabled />, the styles will apply accordingly.

Conditional Styling Based on Props

You can pass multiple props and conditionally apply styles using the ternary operator:

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: ${({ isActive }) => (isActive ? 'green' : 'red')};
  border-radius: ${({ rounded }) => (rounded ? '50%' : '0')};
`

Usage:

<Box isActive={true} rounded={false} />

Handling Complex Conditions

For more complex logic, use functions within the template literals:

const getBackground = (props) => {
  if (props.error) return 'red'
  if (props.success) return 'green'
  return 'gray'
}

const Alert = styled.div`
  padding: 10px;
  color: white;
  background-color: ${getBackground};
`

Using CSS Classes with Styled Components

If you prefer CSS classes, you can use the .attrs() method:

const StyledDiv = styled.div.attrs((props) => ({
  className: props.isActive ? 'active' : '',
}))`
  background: gray;
  &.active {
    background: green;
  }
`

FAQs

1. Can I use styled-components with TypeScript?

Yes! Use interface to define props:

interface ButtonProps {
  active: boolean
}

const Button = styled.button<ButtonProps>`
  background-color: ${({ active }) => (active ? 'blue' : 'gray')};
`

2. How do I conditionally apply multiple styles in styled-components?

Use the css helper from styled-components:

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

const Button = styled.button`
  ${({ primary }) =>
    primary &&
    css`
      background-color: blue;
      color: white;
    `}
`

3. What is the performance impact of conditional rendering in styled-components?

Styled-components generate unique class names per style change, which may slightly affect performance in large applications. Optimize by keeping styles minimal and using useMemo where needed.