DEV Community

loading...
Cover image for All about styled-components

All about styled-components

rahxuls profile image Rahul ・3 min read

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
Enter fullscreen mode Exit fullscreen mode

Getting Started

import styled from 'styled-components'; 

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

 //in React

 <Button>Click Me!</Button>
Enter fullscreen mode Exit fullscreen mode
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>
Enter fullscreen mode Exit fullscreen mode
Extending Styles
const Button = styled.button`
   font-size: 1.5em;
   padding: 2em;
 `; 

 // Extend the button

 const BlueButton - styled(Button)`
  color: blue;
 `;  
Enter fullscreen mode Exit fullscreen mode
To reuse the styles
export const Button = styled.button`
   font-size: 1.5em; 
   padding: 2em;
 `;   

 // DEFINE & EXPORT, Re-use
Enter fullscreen mode Exit fullscreen mode

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
  }
Enter fullscreen mode Exit fullscreen mode

How to?

import {ThemeProvider} from 'styled-components'; 

const App = () => {

 return ( 
   <ThemeProvider theme={theme}>
    <Container />
   </ThemeProvider> 
  ); 
}  
Enter fullscreen mode Exit fullscreen mode

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> 
Enter fullscreen mode Exit fullscreen mode

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> 
)
Enter fullscreen mode Exit fullscreen mode

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

CSS prop

<Button
 css="padding: 1em;color: red;"
/> 
Enter fullscreen mode Exit fullscreen mode

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: /> 
Enter fullscreen mode Exit fullscreen mode

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> 
Enter fullscreen mode Exit fullscreen mode

isStyledComponent

import { isStyledComponent } from 'styled-component'; 

const Header = styled.h1``; 

let isStyled = isStyledComponent(Header); 
Enter fullscreen mode Exit fullscreen mode

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" /> 
Enter fullscreen mode Exit fullscreen mode

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" />  
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)

pic
Editor guide