How to use styled-components in React?

To use styled-components in React, follow these steps:

Install styled-components package by running the following command:

npm install styled-components

Import styled-components in your component file:

import styled from 'styled-components';

Create a styled component by calling the styled function and passing in an HTML element:

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: lightblue;
  }
`;

Use the styled component in your JSX code:

<StyledButton>Click me</StyledButton>

You can also pass props to your styled components and use template literals to dynamically generate styles:

const StyledInput = styled.input`
  border: 1px solid ${props => props.error ? 'red' : 'green'};
`;

Then use the component and pass in props:

<StyledInput error />

That's it! You have successfully used styled-components in your React application. This approach allows you to write CSS directly inside your component files and easily manage styles.