Creating a Reactjs Component Using the Styled Components Library

When you want to use a particular HTML element and define its styles using CSS classes in Reactjs and also reuse it elsewhere, it can be helpful to be able to define it as a react component and style it in the same file without recurring to inline styling. You can achieve this by using the styled-components library, in this quick tips episode, you will learn how. Above is the vid and below you will find some useful notes.

1. 1.

   Pre-reqs

   • Have node.js installed
2. 2.

   Create the Styled Component

   • Create the app using npx create-react-app

     npx create-react-app quick-tips-react-styled-components
     

   • Install the styled-components library

     npm install --save styled-components
     

   • Start the app

     npm start
     

   • Create the styled component HTML element to use by typing styled.HTML-ELEMENT. In this case, I am using an h1 (styled.h1).

     import styled from "styled-components";
     
     const Title = styled.h1`
       color: palevioletred;
       border-left: 5px palevioletred solid;
       padding-left: 5px;
     `;
     

   • Use the new component in the same way you would for the type of styled component that you selected (h1 in this case).

     <Title>
         This is the styled Title
     </Title>
     

3. 3.

   Resources

   Github link for the code

   React.js

   Create a New React App

   Styled Components

   Why styled-components? 💅