styled-components

styled-components is a popular CSS-in-JS library for React and React Native that allows you to write actual CSS code within your JavaScript, creating visually styled React components. It bridges the gap between components and styles by defining components with their styles directly, moving styling out of separate CSS files and into your component logic.

Core Concept:
At its heart, styled-components leverages JavaScript's tagged template literals to define styles. You write standard CSS rules inside these template literals, and styled-components processes them to generate unique class names and injects the corresponding CSS into the DOM. This ensures that your styles are encapsulated and don't clash with other styles in your application.

Key Features and Benefits:
* Automatic Critical CSS: styled-components automatically extracts and injects the minimal CSS required for what's rendered on the screen, improving page load performance, especially for server-side rendered applications.
* No Class Name Bugs: It generates unique, hash-based class names for your styles, eliminating the risk of class name collisions that can arise from traditional CSS methodologies (like BEM, OOCSS) in large or team-based projects.
* Easier Deletion of CSS: Since styles are tied directly to components, deleting a component automatically removes its associated styles, preventing 'dead code' in your stylesheets and making maintenance simpler.
* Dynamic Styling: Styles can be easily adapted based on component props or global themes, allowing for highly dynamic and flexible user interfaces. This enables conditional styling based on component state or properties.
* Theming: It provides robust support for theming, enabling you to define global styles, color palettes, typography, and spacing. These themes can then be easily accessed and applied across your entire application using the `ThemeProvider` component.
* Component-Based: It encourages a component-centric approach where UI components are self-contained with their logic and presentation, promoting reusability and modularity.
* Portability: Styled components are self-contained and easily reusable across different parts of your application or even in other projects, as their styles are intrinsically linked to them.

How it Works (Briefly):
You import `styled` from `styled-components`, then use it as a function paired with an HTML element name (e.g., `styled.div`, `styled.button`) followed by a tagged template literal (backticks `` ` ``). Inside these backticks, you write standard CSS syntax. For example: `const MyButton = styled.button` `background: blue; color: white;` `.

Installation:
To get started, install styled-components using npm or yarn:
`npm install styled-components`
or
`yarn add styled-components`

Example Code

import React from 'react';
import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';

// 1. Global Styles (Optional but good for resetting or base styles)
const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    color: #343a40;
  }
  h1, h2 {
    color: #007bff;
  }
`;

// 2. Basic Styled Component
const Button = styled.button`
  background: palevioletred;
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.75em 1.5em;
  border: 2px solid palevioletred;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: #e6678b; /* A slightly darker red */
    border-color: #e6678b;
    transform: translateY(-2px);
  }

  &:active {
    transform: translateY(0);
  }
`;

// 3. Styled Component with Dynamic Props
const Input = styled.input`
  padding: 0.75em;
  margin: 0.5em;
  color: ${props => props.inputColor || '#343a40'};
  background: ${props => (props.primary ? '#e9ecef' : 'white')};
  border: 2px solid ${props => props.inputColor || '#ced4da'};
  border-radius: 5px;
  outline: none;
  transition: border-color 0.3s ease;

  &:focus {
    border-color: ${props => props.inputColor || '#007bff'};
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
  }
`;

// 4. Theming Example
const theme = {
  main: 'mediumseagreen',
  secondary: '#6c757d',
  borderRadius: '8px'
};

const ThemedButton = styled(Button)`
  background: ${props => props.theme.main};
  border-color: ${props => props.theme.main};
  border-radius: ${props => props.theme.borderRadius};

  &:hover {
    background: #3cb371; /* A slightly darker green */
    border-color: #3cb371;
  }
`;

// 5. Using the 'as' prop to change the underlying HTML element
const LinkButton = styled(Button.withComponent('a'))`
  text-decoration: none;
  display: inline-block;
  text-align: center;
`;

// Main React Component
function App() {
  return (
    // ThemeProvider makes the 'theme' object available to all styled components within its scope
    <ThemeProvider theme={theme}>
      {/* Global styles applied here */}
      <GlobalStyle />

      <div>
        <h1>Styled Components in React</h1>

        <h2>Basic Buttons</h2>
        <Button>Hello World</Button>
        <Button onClick={() => alert('Button Clicked!')}>Click Me</Button>

        <h2>Inputs with Dynamic Props</h2>
        <Input defaultValue="Normal Input" />
        <br />
        <Input primary defaultValue="Primary Input" />
        <br />
        <Input inputColor="rebeccapurple" defaultValue="Custom Color Input" />

        <h2>Themed Buttons</h2>
        <ThemedButton>Themed Green Button</ThemedButton>
        <LinkButton href="https://www.styled-components.com/" target="_blank">
          Visit styled-components
        </LinkButton>
      </div>
    </ThemeProvider>
  );
}

export default App;

Example Code

Related Topics