How to Start Using Styled Components in Your Projects

First have to add the library to your project with

npm install styled-components

Then you can have a separate file for all your stylings. Keep in mind the files will not be css files they will be js files.

To start using styled components, we must import it from "styled-components"

import styled from 'styled-components';

Then you can start styling.

When you style, you can style individual elements

import const StyledDiv = styled.div`
    display: flex;
    flex-direction: column;
`;

Now when we import them into our main app, we use them like a component.

<StyledDiv>
    <AnotherComponent />
</StyledDiv>