conditional rendering in styled components

Question

How can I use conditional rendering in styled-components to set my button class to active using styled-components in React?

In css I would do it similarly to this:<

Answer 1

If your state is defined in your class component like this:

class Card extends Component {
  state = {
    toggled: false
  };
  render(){
    return(
      
        I'm black text
        
I will be rendered green
      
    )
  }
}

Define your styled-component using a ternary operator based on that state

const CardStyles = styled.div`
  p {
    color: ${props => (props.toggled ? "red" : "green")};
  }
`

it should render just the

tag here as green.

This is a very sass way of styling