How to create your first react styled-component?

July 11th, 2020 by Lakshmanan < 1 minute read

Here we are going to learn how to install the react styled component in your react project. First of all creating react project using the command below

npm create react-app react-project-demo
npm install styled-components

After the two commands completed. create a folder under the src/components then create a file under the components firstComponent.jsx

import React from 'react';
import styled from 'styled-components';
 
const Heading1 = styled.h1`
  font-size: 1rem;
  font-weight: 600;
  color: #333;
`;
 
function firstComponent() {
  return (
    <div>
      <Heading1>Hello world</Heading1>
    </div>
  );
}
 
export default firstComponent;

After the component created the page will be render the below example:

Styled component first component

Done. you created the first component using a styled component. Also, I added the code demo URL for your reference.

6+