How to dynamically change css with styled components
Styled components + React = 🔥
Image by krzysztof-m from Pixabay
One way to dynamically change css properties with styled components is to insert a custom prop into your React component and access said property using the dollar sign and curly braces commonly used for template literals.Â
Our current example is testing to see if our use pointer prop is true. If it is, the cursor property will be set to pointer. If it is not, it will be set to grab.
Here's the component with the prop titled usePointer
Our first example allowed us to change one css property in one go. What if we wanted to change multiple css properties. How would we accomplish such a task? The answer lies in a helper given to us by the styled components library called ‘css’.Â
Our current example is validating two props: props.changeColor and props.changeBorder. Both are given to our original Button component and controlled by state using React hooks. If we click said button we will see our Buttons css dynamically change.
Here's component using the props changeColor and and changeBorder
Ways to support my newsletter
🖥 If you believe this content is valuable, share it on social media
🎤 If you believe I would be a good fit for a podcast, let your favorite podcaster know
Connect with me
Connect with me on LinkedIn!
Connect with me on Twitter!