All about styled-components

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 i styled-components

Getting Started

import styled from 'styled-components'; 

const Button = styled.button`
 font-size: 1.5rem;
 padding: 2em;
 `; 

 //in React

 <Button>Click Me!</Button>

Button - props

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

const Button = styled.button`
   font-size: 1.5em;
   padding: 2em;
 `; 

 // Extend the button

 const BlueButton - styled(Button)`
  color: blue;
 `;  

To reuse the styles

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

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

How to?

import {ThemeProvider} from 'styled-components'; 

const App = () => {

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

How to use the theme?

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

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

<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

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

import { createGlobalStyle } from 'styled-component'; 

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

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

isStyledComponent

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

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

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 Here