Notes > styled-component props

styled-component props

I like using styled-component for my project because I have to put the style on my component than putting it in some folder to make it more organized!

( Kidding aside it’s better to put my style somewhere that you can reuse on other components = SSOT )

Anyway, I always forgot how to use props on the styled-component. So here it is.

const DesignStyles = div.styled`
	span {
		display: ${(props) => props.icon ? 'none' : 'block'};

export default function YourComponent(){
		<DesignStyles icon={iconDisplay}>

but can I have props that make a set of styles? Yes, but it’s not really that readable for me. It’s better to create two sets of classes, and then I need to create conditions for my component to use the class based on my need.

Tags 🏷

  • ReactJs
  • styled-component