Install & Set Up Styled Components with React, TypeScript, Vite

In this section, we’ll walk you through the installation and configuration of Styled Components in a React with TypeScript project using the Vite build tool.

1. Create React App Using Vite

Follow these steps to install React with Vite and get your project up and running.

npm create vite@latest
#or  Yarn:
yarn create vite
#With PNPM:
pnpm create vite

Choose React with TypeScript from the available options.

Move to your project directory and run the npm command.

cd react-styled-components
npm install
npm run dev

2. Installing Styled Components in Your React App

Getting styled-components up and running is a breeze – just one command, and you’re good to go.

# with npm
npm install styled-components

# with yarn
yarn add styled-components

3. Test Styled Components in Your React App

Let’s create a title and a button using React and Styled Components.

import styled from "styled-components";

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #bf4f74;
`;
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
  text-align: center;
`;
const Button = styled.button`
  color: #bf4f74;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #bf4f74;
  border-radius: 3px;
`;
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

export default function App() {
  return (
    <>
      <Wrapper>
        <Title>Hello World!</Title>
        <Button>Normal Button</Button>
        <TomatoButton>Tomato Button</TomatoButton>
      </Wrapper>
    </>
  );
}

1. Create React App Using Vite

2. Installing Styled Components in Your React App

3. Test Styled Components in Your React App

Aaronn