You can write the actual CSS code to style your components. it also removes the mapping between component and style. for me, it’s better than CSS/SASS/SCSS. styled component

I’m using an existing project from the previous article. we will make the pokemon list fancier with styled-components. you can clone here and use branch init.

1. Add a styled component to the project

yarn add styled-components

2. Make Header Component

The header for example and you can try others later with your way. create components folder on the root. inside folder component create folder Header.

Create file StyledHeader.js and create components with styled-components.

import styled from "styled-components";

const StyledHeader = styled.div`
padding: 0;
margin: 0;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
`;
export default StyledHeader;

You can change for style with your style. with a background or anything else.

Because this file only for custom style, so we need to create index.jsx file for a component view like a general react component.

import StyledHeader from "./StyledHeader";

export default function Header() {
return (
<StyledHeader>
<h1>Pokemon</h1>
</StyledHeader>
);
}

#javascript #react #nextjs