DEV Community

loading...

How to Start Using Styled Components in Your Projects

Justin Bermudez
・1 min read

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;
`;
Enter fullscreen mode Exit fullscreen mode

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

<StyledDiv>
    <AnotherComponent />
</StyledDiv>
Enter fullscreen mode Exit fullscreen mode

Discussion (0)