Advanced Usage of Styled Components for your React App - Part 3
Tags: webdev, javascript, react, beginners
Published: 2021-03-02 09:59:14

This post continues the topic about [Advanced Usage of Styled Components](https://dev.to/olenadrugalya/advanced-usage-of-styled-components-for-your-react-app-2hfh) and covers *animation*, *styling the existing component* and attaching *additional props* (yes you can do that too).

## Styling existing Component
Using method `styled` it is possible to style not only your own components, but also imported ones (third party components). This is very useful feature. 
  It is possible to style:
1. Another styled component
2. Another non-styled third-party component

#### Styling another Styled Component

Let's say we want to create buttons for our application and we want them to have pretty much same style, except for minor differences. If we would like to do same in another language (for example C#), we would create *interface Button* with the main features and then other buttons would inherit from it. Pretty much same is happening here. 

  We create a functional component **Button** and define styles using `styled` method:
```react
export const Button = styled.button`
  background: #0d2728;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -webkit-appearance: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: sans-serif;
  font-weight: 700;
  height: 45px;
  margin: auto;
  opacity: 0.5;
  width: 35%;
`
```
Now we want to make a button with different background colour only, but with all other styles kept. First we import *Button* component to our file:
```react
import {Button} from "Button.styles.js"
```
Now we can style it as a usual component. Remember, that new styles will have higher specificity over old styles:
```react
export const LoginButton = styled(Button)`
background-color: red;`
``` 


#### Styling non-styled third-party Component

The `styled` method works perfectly on any third-party component, as long as they attach the passed `className` prop to a DOM element.
Lets say you create `Link` component (react-router-dom's Link fo example) for your application:

```react
export const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);
```
Now you want it to be styled so it would be not so boring:

```react
export const FunnyLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;`
```
When we use them in our app, they would be 2 different links:
```react
import {Link, FunnyLink} from "Link.styles.js"

const App = ()=>{
return(
   <div>
     <Link>I am boring link </Link><br/>
     <FunnyLink>I am very funny link </FunnyLink> 
  </div>
  )
}
```
Simple as that :) Now let's explore one more important feature

## Adding Additional Props

The official docs say, that to avoid unnecessary wrappers that just pass on some props to the rendered component, or element, you can use the `.attrs` constructor. It allows you to attach additional props (or "attributes") to a component. When do we even need that? Let's explore.

We have our styled `Button` component and we know that by default it has `type="submit"`right? What if we want to change the type for one of the buttons to `type="button"`? We can do that using `.attrs` constructor.

```react
import styled from 'styled-components';
export const Button = styled.button.attrs(props => ({
  type: props.type || 'button'
  
}))`
```
Every *Button* component will now have type="button" as default.
> The rule of thumb is to use `.attrs` when you want every instance of a styled component to have that prop, and pass props directly when every instance needs a different one -[Styled Components Docs](https://styled-components.com/docs/faqs#when-to-use-attrs)

## Animation
The final feature I want to explore as a final part is *animation*. 
We can use the animation on any element using `keyframes` helper. Let's animate our Button :)

First we create **keyframes**:
```react
const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;
```
Than we use it in the `animation` property:

```react
export const Button = styled.button`
  background: #0d2728;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -webkit-appearance: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: sans-serif;
  font-weight: 700;
  height: 45px;
  margin: auto;
  opacity: 0.5;
  width: 35%;
  animation: ${rotate} 2s linear infinite;`
```
That is amazing! Enjoy the animation and code [here](https://codesandbox.io/s/advancedstyledcomponents-l5s0y?file=/src/App.js)

Thank you for reading my blog. Feel free to connect on [LinkedIn](https://www.linkedin.com/in/olenadrugalya/) or [Twitter](https://twitter.com/OlenaDrugalya) :)

<a href='https://ko-fi.com/J3J42JOOA' target='_blank'><img height='12' width=30% style='border:0px;height:12px;' src='https://cdn.ko-fi.com/cdn/kofi1.png?v=2' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>