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](https://frontendshape.com/wp-content/uploads/2024/07/p4oPoiUPRYOXrp5o8ZSpeiiPZr5lcWjY63DluHNa.png)
Choose React with TypeScript from the available options.
![typescript styled components](https://frontendshape.com/wp-content/uploads/2024/07/maQVfBQXmFzHx9qtKhvrSAejHukYBZYHr4d8ALaU.png)
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](https://frontendshape.com/wp-content/uploads/2024/07/w0w1hbfmuXynIAANZKz8p4AYSBU6paiTJfSLv4rt.png)