React › Styling in React (CSS Modules, Styled Components & Tailwind)

How does styled components let you write CSS directly inside your JavaScript files?

Intermediate

Answer

Styled components lets you write actual CSS inside a special template literal attached to a component definition, creating a real React component with those styles automatically applied. This keeps a component's structure and its specific styles closely tied together in the same file.

import styled from 'styled-components';

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

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

Real-world example A design team builds a reusable Button styled component with consistent padding and colors, and every page in the app imports and uses that exact same component, keeping the button's appearance perfectly consistent everywhere.

Common follow-ups: How does styled components handle changing styles based on a prop, like a different color?;What is the performance cost, if any, of writing CSS this way compared to a plain CSS file?

Component Composition & Children Props;Design Patterns in React