485 reads

Introduction To Styled-Components

by RahulFebruary 25th, 2021

Too Long; Didn't Read

styled-components is a CSS-in-JS library that helps you to write CSS in a component. You can write scoped CSS which means that CSS will apply only for that element in the component, with no spilling. 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. To enable support for the CSS prop you have to use the Babel plugin. To use the prop to style the component without creating another styled component.

featured image - Introduction To Styled-Components

styled-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 themes?

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