Install & Setup Styled Components + 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

react styled components

Choose React with TypeScript from the available options.

react typescript styled components

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>
    </>
  );
}

create react styled components