styled-component props

February 28, 2023

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(){
	return(
		<DesignStyles icon={iconDisplay}>
			<span><p>Text</p></span>
		</DesignStyles>
	)
}

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.