All about styled-components
Tags: webdev, react, programming, codenewbie
Published: 2021-02-17 11:59:54

styles-components is a **CSS-in-JS** library that helps you to write CSS in a component. Here in this post, I will cover more than basics you need to know. 

---

# Introduction

You can write scoped CSS which means that CSS will apply only for that element in the component, with no spilling. 
You can still write **Global CSS**. 

#### Why? 

- Automatics vendor prefixes
- Unique class names, that means no class names bugs 😉
- Removes unused styles
- Adapting based on props
- Supports SSR(Server Side Rendering) too

---

#### Installing

```npm
npm i styled-components
```

#### Getting Started

```react
import styled from 'styled-components'; 

const Button = styled.button`
 font-size: 1.5rem;
 padding: 2em;
 `; 
 
 //in React
 
 <Button>Click Me!</Button>
```

##### Button - props

```react
const Button = styled.button`
   font-size: 1.5em; 
   padding: 2em;
   color: ${
    props => (props.primary ? 'blue' : 'black')
    };
 `; 
 
 // In react
 
 <Button primary>Click Me!</Button>
```

##### Extending Styles

```react
const Button = styled.button`
   font-size: 1.5em;
   padding: 2em;
 `; 
 
 // Extend the button
 
 const BlueButton - styled(Button)`
  color: blue;
 `;  
```

##### To reuse the styles

```react
export const Button = styled.button`
   font-size: 1.5em; 
   padding: 2em;
 `;   
 
 // DEFINE & EXPORT, Re-use
```

---

# Theme

A theme is a collection of all the things we use in an app like the colors, spacing, etc. It defines the design system of your app. It's easier to change. 

### Simple Theme

```react
const theme = {
   color: {
   blue: "#1862fd";
   lightblue: "#f0f3ff"; 
    }, 
    sizes: [16, 32, 64, 128, 256], 
    fontSizes: [12, 14. 16, 20, 24]
    // ... and mannnny thingsss
  }
```

### How to? 

```react
import {ThemeProvider} from 'styled-components'; 

const App = () => {

 return ( 
   <ThemeProvider theme={theme}>
    <Container />
   </ThemeProvider> 
  ); 
}  
```


### How to use the theme? 

```react
const Button = styled.button`
 color: ${props => props.theme.color.blue};
 padding: ${props => props.theme.sizes[0]};
`; 

//Using the button
<Button>Click</Button> 
```

### Why? 

It helps in creating a style for your app. All the font particulars, colors. spacing and many things can be maintained in one file. You can create **separate** themes for one app. 

---

# Best (of styled-components)

- as props
- CSS prop
- attrs
- Global Styles
- Server-Side Rendering

### as prop

```react
const Header = styled.h1``; 

render(
 <Header as="h3">
   Hello World!
 </Header> 
)
```

You can create any styled element and use **as prop** to styles as another element. 

### CSS prop

```react
<Button
 css="padding: 1em;color: red;"
/> 
```

To style the component without creating another styled component. 

> To enable support for the CSS prop you have to use the Babel plugin. 

### attrs

```react
const Input = styled.input.attrs(props => ({
 type: "password"
 }))``; 
 
 // Create an input of type password
 <Input aria-hidden="true: /> 
```

To set the default or necessary attributes for the styled component. 

### Global styles

```react
import { createGlobalStyle } from 'styled-component'; 

const GlobalStyle = createGlobalStyle`
  body { color: 'black'; }
`; 

<div className="App">
  <GlobalStyle /> 
</div> 
```

### isStyledComponent

```react
import { isStyledComponent } from 'styled-component'; 

const Header = styled.h1``; 

let isStyled = isStyledComponent(Header); 
```

A utility to help identify styled-components. 

---

# with styled-system

It is a library which gives a lot of utilities that will map the props to your theme. It also makes you Component Oriented styles easy. 

### with styled-system

```react
import styled from 'styled-component'; 
import {space,color,position} from 'styled-component'; 

const Card = styled.div`
 ${space}
 ${color}
 ${position}
`;

<Card p="2em" bg="red" />
<Card positon="absolute" top="0" left="0" /> 
```

### Without styled-system

```react
import styled from 'styled components'

const Card = styled.div`
  padding: ${props => props.padding};
  background: ${pops => props.background};
  color: ${props => props.color};
  
<Card padding="2em" background="red" />  
```

### Advantages of `styled-system`

- It enables Rapid Development. 
- Re-use of components will be easy
- It will props-driven development
- CSS-in-JS
- No extra tooling to build

---

😉 Thanks For Reading | Happy Styling 🥂

Get weekly newsletter of amazing articles I posted this week and some offers or announcement. Subscribe from <a href="https://mailchi.mp/9f73b65b9c38/rahulism" target="_blank">Here</a>

<a href="https://www.buymeacoffee.com/rahxuls" target="_blank"> <img src="https://res.cloudinary.com/rahulism1/image/upload/v1608182430/bmc_nbxakd.png"></a>