How do I use styled-components in my React project?

How do I use styled-components in my React project?

To use styled-components, first install it using npm or yarn: npm install styled-components. Then, you can create styled components in your React files.

Can you show me an example of creating a styled button?

Sure! Here's a simple example:

import styled from 'styled-components';

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

function App() {
  return <Button>Click Me!</Button>;
}

What are the benefits of using styled-components?

Styled-components allow for scoped styles, dynamic styling based on props, and easier maintenance of CSS in JS.

Can I use them with TypeScript?

Yes, styled-components work well with TypeScript. You can define types for your styled components and props.