Mixins with Styled Components

Photo by Sigmund on Unsplash

So you decided to use styled-components in your awesome project. You went ahead and created this cool-looking button.

And this is how it looks.

You are happy with the result and you move ahead with your app. As you write some more code and your app starts taking shape, you feel like the font on these buttons is too big according to the application. You are using heading, subheading and body font sizes and you would like to use body font size here. Easy right you just change the font size in Button.

easy-peasy the button font is now smaller. Imagine now you need the same button but with a smaller font, so what we can do is extend the button and add the needed font size.

Now we can use SmallButton where we need the same button with a smaller font.

This creates a lot of components in our application which are all same but only differ in font size. Also, imagine if you need different box-shadow color, then again we will have to extend this button and create a new component.

We can use css utility here from styled-components

Now, we can simply use our button like this,

This makes our button easy to use and maintain.

👋 I would love to hear more about this from you. Contact me here