styled-components

styled-components allows you to add styles to your application that are written with a mixture of JavaScript and CSS using a technique called CSS-in-JS.

Helps keep the concerns of styling and element architecture separated and make components more readable without worrying about class name collisions.

Example implementation shown below.

components/header/styled.ts
import styled from 'styled-components'
const Container = styled.div<{isLarge: boolean}>`
padding: "50px";
font-size: ${({ isLarge }) => (isLarge ? "36px" : "18px")};
`;
const Title = styled.div`
margin-right: 50px;
color: ${({ theme }) => theme.colors.cancelRed};
`;
const Subtitle = styled(Title)`
margin-right: 30px;
`;
components/header/index.tsx
import React from "react";
import { Container, Title, Information } from "./styled";
export const Header: React.FC = () => {
return (
<Container isLarge>
<Title />
<Subtitle />
</Container>
);
};

Adapting based on props#

Props can be passed to styled components to customize a component dynamically. When setting the isLarge prop to true, we are swapping out its font-size.

const Container = styled.div<{isLarge: boolean}>`
padding: "50px";
font-size: ${({ isLarge }) => (isLarge ? "36px" : "18px")};
`;

Extending Styles#

You can extend components with style if you want to create a similar one, styled slightly differently. To easily make a new component that inherits the styling of another, just wrap it in the styled() constructor.

const Subtitle = styled(Title)`
margin-right: 30px;
`;

Theming#

styled-components has full theming support by exporting a <ThemeProvider> wrapper component. This component provides a theme to all components underneath itself via the context API. In the render tree all styled-components will have access to the provided theme.

A theme can also be passed down to a component using the theme prop.

const Title = styled.div`
margin-right: 50px;
color: ${({ theme }) => theme.colors.darkGrey};
`;

theme prop gets values from definitions/styled-components folder. You can add any css properties theme files in order to use from all styled-components.

Dark Mode#

Dark mode feature serving as a ready to use in created project with styled-component plugin.

You customize colors at definitions/styled-components folder:

The first is common.ts, which will contain our base styling, and the others are dark.ts and light.ts, which will include variables for our dark and light themes.

definitions/styled-components/dark.ts
const dark: DefaultTheme = {
colors: {
...common.colors,
body: "#363537",
toggleBorder: "#556678",
gradient: "linear-gradient(#091236, #1E215D)",
background: "#808080",
textColor: "#FFFFFF",
},
};
definitions/styled-components/light.ts
const light: DefaultTheme = {
colors: {
...common.colors,
body: "#E2E2E2",
toggleBorder: "#ABB7C4",
gradient: "linear-gradient(#39598A, #79D7ED)",
background: "#FFFFFF",
textColor: "#000000",
},
};

Set the colors with same key value at both file and then use with theme props in styled components. Defined colors changes when invoke toggle function from definitions/styled-components/index.ts.

components/Header/styled.ts
import styled from "styled-components";
export const Container = styled.div`
background-color: ${({ theme }) => theme.colors.body};
`;

note

All needed dark mode configurations and files adds by CLI if styled-component plugin selected as CSS Preprocessor during project creation phase.

Styled System#

Styled System is a collection of utility functions that add style props to your components and allows you to control styles based on a global theme object with typographic scales, colors, and layout properties.

tip

We are serving styled-system as a optional plugin with styled-components.

Example usage:

styledSystemExample/styled.ts
import styled from "styled-components";
import { border, color, layout, space, typography } from "styled-system";
export const Card = styled.div`
${border}
${color}
${layout}
${space}
`;
styledSystemExample/index.ts
import React from "react";
import { Card } from "./styled";
export const StyledSystemExample: React.FC = () => {
return (
<Card bg="wheat" maxWidth="20rem" borderRadius={10} mx="auto" mt="32px">
);
};

How to add styled-components to existing Next.js project?#

We recommend to check official Next.js example to integrate styled-component to your existing project.

Last updated on by Necati Özmen