What is CSS-in-JS in React?

What is CSS-in-JS in React?

CSS-in-JS is a styling approach where CSS is written within JavaScript files, allowing for dynamic styling.

What are the benefits of using CSS-in-JS?

Benefits include scoped styles, easier maintenance, and the ability to leverage JavaScript for dynamic styling.

Can you give me an example of how to implement it?

Sure! You can use libraries like styled-components or Emotion. For example, with styled-components:

import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  padding: 10px;
`;

<Button>Click Me</Button>

Are there any downsides to using CSS-in-JS?

Yes, potential downsides include larger bundle sizes and performance issues if not managed properly.