CSS-in-JS is a styling technique where JavaScript is used to style components. There are various libraries available to write CSS-in-JS, including styled-components, emotion, and JSS among others.
Here we will discuss how to use the styled-components library in your React project.
1. Install styled-components in your React project.
```
npm install styled-components
```
1. Import styled-components into your JavaScript or component file.
```
import styled from ‘styled-components’;
```
1. Create a Styled Component
```
const Button = styled.button`
background: palevioletred;
border-radius: 3px;
border: none;
color: white;
padding: 15px 25px;
font-size: 1em;
cursor: pointer;
1. Now you can use it in your App just like any other React Component.
```
function App() {
return (
The above-defined Button component includes styling and can be used anywhere like a regular component. The CSS is written in a template literal using the `styled-components`’ styled method. You also can use a prop to conditionally apply CSS.
1. Applying CSS conditionally with a prop
```
const Button = styled.button`
background: ${props => props.primary ? “palevioletred” : “white”};
color: ${props => props.primary ? “white” : “palevioletred”};
// more styles
`
```
You can pass a prop “primary” to the Button to conditionally apply styling.
```
```
And that’s it! You’re now using CSS-in-JS in your React project.
