Using styled-components in React/Next Applications
Tags: react, webdev, typescript, beginners
Published: 2024-05-14 01:00:00

## Introduction 📯📯📯
When it comes to styling your React application with a **_css-in-js_** approach, **_styled-components_** stands out as a top choice. In this post, I'll walk you through how to utilize styled-components in a Next application. By default, **_Next_** provides a way to use **_css-in-js_** through styled-jsx. However, if you find **_styled-jsx_** cumbersome because it requires writing **_CSS_** within **_JSX_**, which can make your components lengthier, then styled-components might be the right fit for you.

## Installation of styled-components 🎀🎀🎀

```sh
npm install styled-components
// or
yarn add styled-components
```

Example usage:

```tsx
import styled from 'styled-components'

const Wrapper = styled.div`
  color: red;
  text-align: center;
`

// Component with input param
const Wrapper2 = styled.div<{$color?: string}>`
  color: ${props => props.$color};
  text-align: center;
`

export default function Index() {
  return (
    <>
      <Wrapper>Demo 1</Wrapper>
      <Wrapper2 $color="green">Demo 2</Wrapper2>
    </>
  )
}
```

## Adding Theme Settings ⭐⭐⭐

Here's how to use the **_ThemeProvider_** to import a theme for your entire application that can be accessed anywhere, similar to using **_React context_**.

```tsx
import {useContext, useMemo} from 'react'
import styled, {ThemeContext, ThemeProvider} from 'styled-components'

const Wrapper = styled.div`
  color: red;
  text-align: center;
`

const Wrappe2 = (color: string) => styled.div`
  color: ${color};
  text-align: center;
`

const theme = {
  colors: {
    primary: '#0070f3',
  },
}

function Display() {
  const themeContext = useContext(ThemeContext) // get theme context
  console.log('themeContext', themeContext)
  return (
    <>
      <Wrapper>Demo 1</Wrapper>
      <Wrapper2 $color={themeContext?.colors.primary}>Demo 2</Wrapper2>
    </>
  )
}

export default function Index() {
  return (
    <ThemeProvider theme={theme}>
      <Display />
    </ThemeProvider>
  )
}
```

## Using in the Next Application 🌱🌱🌱

If you want to use it in a Next application, simply add the following code snippet to the app/layout.tsx file to set up the layout for all pages.

```tsx
export default function Index({children}: {children: JSX.Element}) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>
}
```

Afterwards, in each page, you can retrieve the theme context as follows:

```tsx
'use client'

import {useContext, useMemo} from 'react'
import styled, {ThemeContext, ThemeProvider} from 'styled-components'

export default function Index() {
  const themeContext = useContext(ThemeContext) // get theme context
  return (
    <>
      <Wrapper>Demo 1</Wrapper>
      <Wrapper2 $color={themeContext?.colors.primary}>Demo 2</Wrapper2>
    </>
  )
}
```

## Conclusion 🏆🏆🏆
So, we have successfully set up `styled-components` in `React/Next`, providing some examples of usage and how to configure using `ThemeProvider`. Hopefully, this article proves to be helpful.

**_Don't hesitate to leave your thoughts in the comments section, and remember to like, share, and follow for more insightful content in the future!_**

**_If you found this content helpful, please visit [the original article on my blog](https://howtodevez.blogspot.com/2024/03/using-styled-components-in-reactnext.html) to support the author and explore more interesting content._**🙏🙏

<a href="https://howtodevez.blogspot.com/2024/03/sitemap.html" target="_blank" rel="noreferrer"><img src="https://img.shields.io/badge/Blogger-FF5722?style=for-the-badge&logo=blogger&logoColor=white" width="36" height="36" alt="Blogspot" /></a><a href="https://dev.to/chauhoangminhnguyen" target="_blank" rel="noreferrer"><img src="https://img.shields.io/badge/dev.to-0A0A0A?style=for-the-badge&logo=dev.to&logoColor=white" width="36" height="36" alt="Dev.to" /></a><a href="https://www.facebook.com/profile.php?id=61557154776384" target="_blank" rel="noreferrer"><img src="https://img.shields.io/badge/Facebook-1877F2?style=for-the-badge&logo=facebook&logoColor=white" width="36" height="36" alt="Facebook" /></a><a href="https://x.com/DavidNguyenSE" target="_blank" rel="noreferrer"><img src="https://img.shields.io/badge/X-000000?style=for-the-badge&logo=x&logoColor=white" width="36" height="36" alt="X" /></a>