Using styled-components with React
Tags: styledcomponents, css, react
Published: 2021-07-09 17:56:34

Well, we all love CSS, we all love JavaScript and we all love React. What if someone tells you that now you can create full-fledged Components ( e.g., a button, a navbar, a tile, etc ) while writing React code using CSS in a very easy handy way.

## How does a styled component looks like ?

Just like this 👇
```jsx
const Button = styled.a`
  /* This renders the buttons above... Edit me! */
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;
`
```

And how do we use it? Is it even simple? Yes, you guessed it right,

```jsx
// Writing this will give you a separate button component of the CSS properties 
//mentioned above
<Button>Big Button</Button>
```

Ain't it easy? Now you can use this button anywhere without writing any separate class or anything.

## Let's dive a little deeper

### Why Styled Components?

- **Automatic vendor prefixing:** You can use standard CSS properties, and styled-components will add vendor prefixes should they be needed.
- **Unique class names:** Styled components are independent of each other, and you do not have to worry about their names because the library handles that for you.
- **Elimination of dead styles:** Styled components removes unused styles, even if they’re declared in your code.

### Installation

It is super easy. You can do it through a [CDN](https://styled-components.com/docs/basics#installation) or with a package manager like yarn or npm…

for ***npm***

```jsx
// npm
npm I styled-components
```

with ***yarn***

```jsx
yarn add styled-components
```

### Let's learn the syntax now

If I go a little precise, styled-components use Javascript's template literals to bridge the gap between components and the styles. So, technically when we write a styled component, we are actually writing React components with styles. 

Let's see an example now.

```jsx
import styled from "styled-components";

// Styled component named StyledButton
const OrangeButton = styled.button`
  background-color: orange;
  font-size: 1.5rem;
  color: white;
	border-radius: 5px;
`;

// nothing special here, works just like a normal react component.
const SomeReactComponents = () => return <OrangeButton> Login </OrangeButton>;
```

Now we know that whatever we write with styled components, in reality, is a React component. So a React component is definitely incomplete without props.

Yes we can use props with styled components 😍🔥🔥

### Let's learn how to do that

For example, we need a button, but the button's color is coming from the database or it is dynamic or dependent on some other component, how will we use that in ***styled-components***? Obviously using props.

```jsx
import styled from "styled-components";

const DynamicButton = styled.button`

  font-size: 1.5rem;
  color: white;
	border-radius: 5px;
										//props																
  background-color: ${props => props.bg === "red" ? "red" : "green";
`;

function SomeReactComponent() {
  return (
    <div>
      <DynamicButton bg="Red">Red button</DynamicButton>
      <DynamicButton bg="Green">Green button</DynamicButton>
    </div>
  )
}
```

So we pass a ***bg*** in props and if you pay a little attention ***${props}*** is used because styled components use JavaScript's template literals.

## Tip

We can keep styles in a separate file with export statements and just simply import them wherever we want to use them.

That's Styled components !!

## Pros

- **Reusable** – just as the normal React components, you can make small reusable pieces of code and avoid code duplication. Typical use cases are buttons, tables, forms, etc.
- Writing pure CSS – оne of the biggest advantages of Styled components in comparison to other styling solutions in React. You don’t use weird syntax and write the CSS as a JavaScript object. Inside the template literals, you write SCSS or plain CSS.
- Dynamic styling – Using props, you can have dynamic values, which gives you a high level of flexibility by avoiding writing duplicated styles.

## Cons

- The only con I see is while debugging something in chrome dev tools. We see weird class names and hence it is difficult to find what class is doing what. Other than this I find them super lit.

See you using styled components 😁