Question

What styling approach do you prefer for creating CSS or styles in React?

I'm curious about the best styling approaches for React. What method do you prefer for creating CSS or styles in React, and why?

Answer 1

CSS-in-JS (Styled Components)

One of the most widely used React styling libraries is Styled Components. It enables you to use template literals to write CSS directly within your JavaScript files. There are no global CSS conflicts because the styles are scoped to the component.

Advantages:

Scoped styles (styles are applied only to the component where they are defined).

Support for theming and dynamic styles.

Automatic vendor prefixing and CSS optimization.

Example:

import styled from 'styled-components';

const Button = styled.button`

  background-color: ${(props) => (props.primary ? 'blue' : 'red')};

  color: white;

  padding: 10px;

`;