Styled Components: A Modern Approach to CSS-in-JS

Styled Components have emerged as a popular solution for incorporating CSS into modern JavaScript. They serve as a successor to CSS Modules, enabling developers to write CSS that is scoped to a specific component without leaking styles to other elements on the page.

A Brief History

In the early days of the web, CSS didn’t exist, and layouts were created using tables and frames. Eventually, frameworks like Bootstrap and Foundation emerged to simplify grid and layout creation. However, the adoption of these frameworks slowed down with the introduction of preprocessors like SASS and the emergence of code organization conventions like BEM and SMACSS.

Over time, JavaScript and build processes became more prevalent in frontend development, leading to the integration of CSS into JavaScript through CSS-in-JS solutions. Several tools, including React Style, jsxstyle, and Radium, explored different approaches to CSS-in-JS, but one of the most popular solutions is Styled Components.

Introducing Styled Components

Styled Components are designed as a successor to CSS Modules, allowing developers to write CSS that is scoped to a single component. This prevents styles from affecting other elements on the page. With Styled Components, you can write plain CSS directly in your components without worrying about class name collisions.

Installation

To use Styled Components, you can easily install the package using npm or yarn:

npm install styled-components
yarn add styled-components

Once installed, you can import the styled object into your code:

import styled from 'styled-components'

Your First Styled Component

Now that you have the styled object imported, you can start creating Styled Components. Let’s create a basic button component as an example:

const Button = styled.button`
 font-size: 1.5em;
 background-color: black;
 color: white;
`

With this code, Button becomes a React Component that can be rendered just like any other React component:

render(<Button />)

Styled Components offer various functions to create components for different HTML elements, such as section, h1, input, and more. The syntax used to define styles using template literals might feel unfamiliar at first, but it’s simply a way to pass arguments to the function.

Using Props to Customize Components

Styled Components allow you to pass props to customize your components. These props are passed down to the DOM node rendered by the component. For example, let’s customize an input component by passing placeholder and type props:

const Input = styled.input`
 //...
`

render(
 <div>
   <Input placeholder="..." type="text" />
 </div>
)

You can also use props to dynamically style components based on their values. Here’s an example:

const Button = styled.button`
 background: ${props => (props.primary ? 'black' : 'white')};
 color: ${props => (props.primary ? 'white' : 'black')};
`

render(
 <div>
   <Button>A normal button</Button>
   <Button>A normal button</Button>
   <Button primary>The primary button</Button>
 </div>
)

In this example, setting the primary prop changes the color of the button.

Extending an Existing Styled Component

If you have a component and want to create a similar one with slight variations, you can use the extend method:

const Button = styled.button`
 color: black;
 //...
`

const WhiteButton = Button.extend`
 color: white;
`

render(
 <div>
   <Button>A black button, like all buttons</Button>
   <WhiteButton>A white button</WhiteButton>
 </div>
)

It’s Regular CSS

Styled Components support standard CSS syntax, allowing you to use the CSS you already know. You can take advantage of media queries, nesting, or any other CSS feature you require. Here’s an example of a media query:

const Button = styled.button`
 color: green;
 @media screen and (max-width: 800px) {
 color: black;
 }
`

Using Vendor Prefixes

Styled Components automatically add the necessary vendor prefixes, eliminating the need for manual prefixing in your CSS.

Conclusion

This introduction to Styled Components provides you with the basic concepts and understanding to utilize this approach for incorporating CSS into your JavaScript code. By leveraging Styled Components, you can simplify the process of styling components and enhance your development workflow.