Skip to main content

Styled Components

1. Introduction to Styled Components​

What are Styled Components?​

Styled Components is a popular CSS-in-JS library that allows you to write actual CSS code to style your React components. It combines the best parts of ES6 and CSS to provide a powerful styling solution.

Key Benefits​

  • Component-level styles
  • Dynamic styling based on props
  • Automatic vendor prefixing
  • Easy theming
  • No class name bugs
  • Simple dynamic styling
  • Painless maintenance

2. Basic Syntax​

Creating a Styled Component​

import styled from 'styled-components';

// Basic styled component
const Button = styled.button`
  background-color: #3498db;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
`;

// Usage in a component
function App() {
  return <Button>Click me</Button>;
}

3. Dynamic Styling​

Prop-Based Styling​

const Button = styled.button`
  background-color: ${props => 
    props.primary ? '#3498db' : '#2ecc71'};
  color: white;
  padding: 10px 15px;
  opacity: ${props => props.disabled ? 0.5 : 1};
`;

// Usage
<Button primary>Primary Button</Button>
<Button disabled>Disabled Button</Button>

4. Extending Styles​

Extending Existing Components​

// Base Button
const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// Extended Button
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

5. Adapting Based on Props​

Conditional Styling​

const Input = styled.input`
  background: ${props => props.error ? 'red' : 'white'};
  border: 2px solid ${props => props.error ? 'red' : 'gray'};
  
  ${props => props.size === 'large' && `
    font-size: 20px;
    padding: 15px;
  `}
`;

// Usage
<Input error />
<Input size="large" />

6. Pseudo Selectors & Nested Styles​

Complex Selectors​

const Card = styled.div`
  background: white;
  
  &:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }
  
  & > h2 {
    color: #333;
  }
  
  &::before {
    content: '';
    display: block;
  }
`;

7. Theming​

Creating a Theme Provider​

import { ThemeProvider } from 'styled-components';

const theme = {
  colors: {
    primary: '#3498db',
    secondary: '#2ecc71',
    text: '#333'
  },
  fonts: {
    main: 'Roboto, sans-serif'
  }
};

const ThemedButton = styled.button`
  background-color: ${props => props.theme.colors.primary};
  font-family: ${props => props.theme.fonts.main};
`;

function App() {
  return (
    <ThemeProvider theme={theme}>
      <ThemedButton>Themed Button</ThemedButton>
    </ThemeProvider>
  );
}

8. Global Styles​

Creating Global Styles​

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
  }

  * {
    box-sizing: border-box;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      {/* Rest of your app */}
    </>
  );
}

9. Advanced Techniques​

Animations​

import styled, { keyframes } from 'styled-components';

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const RotatingDiv = styled.div`
  animation: ${rotate} 2s linear infinite;
`;

Media Queries​

const ResponsiveDiv = styled.div`
  width: 100%;
  
  @media (min-width: 768px) {
    width: 50%;
  }
  
  @media (min-width: 1024px) {
    width: 33.33%;
  }
`;

10. Performance Considerations​

  • Use memo to prevent unnecessary re-renders
  • Avoid creating styled components inside render methods
  • Use the attrs method for static props
  • Minimize the use of interpolations

11. Common Pitfalls​

  • Don't overuse dynamic styling
  • Be cautious with complex prop-based styles
  • Remember that styled-components can impact performance
  • Use code splitting for large applications

Conclusion​

Styled Components provide a powerful and flexible way to style React applications, combining the power of CSS with the dynamism of JavaScript.

Quick Reference​

  • ✅ Component-level styling
  • ✅ Dynamic props
  • ✅ Easy theming
  • ✅ No class name conflicts
  • ❗ Potential performance overhead with complex styles

Pro Tip: Always profile your application and use styled-components judiciously!