REACT Styled Components

Styled Components is a popular CSS-in-JS library that allows you to style React components by writing actual CSS in JavaScript.

1. Setting Up Styled Components

Installation

Install the styled-components package in your React project.

npm install styled-components

2. Creating a Styled Component

Styled Components are created using the styled function, allowing you to define styles for any HTML or custom React element.

Example:

import styled from 'styled-components';

const Heading = styled.h1`
    color: #3498db;
    font-size: 24px;
    text-align: center;
`;

function App() {
    return <Heading>Hello, React with Styled Components!</Heading>;
}

export default App;

3. Styling Dynamic Components

Styled Components allow you to use props to dynamically adjust styles.

Example: Dynamic Styling

import styled from 'styled-components';

const Button = styled.button`
    background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;

    &:hover {
        background-color: ${(props) => (props.primary ? 'darkblue' : 'darkgray')};
    }
`;

function App() {
    return (
        <div>
            <Button primary>Primary Button</Button>
            <Button>Default Button</Button>
        </div>
    );
}

export default App;

4. Extending Styles

You can extend existing styled components to create variants without repeating styles.

Example:

const Button = styled.button`
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
`;

const PrimaryButton = styled(Button)`
    background-color: blue;
    color: white;
`;

const SecondaryButton = styled(Button)`
    background-color: gray;
    color: black;
`;

function App() {
    return (
        <div>
            <PrimaryButton>Primary</PrimaryButton>
            <SecondaryButton>Secondary</SecondaryButton>
        </div>
    );
}

export default App;

5. Theming with Styled Components

Styled Components makes it easy to define and use themes across your app.

Step 1: Create a Theme

// theme.js
export const theme = {
    colors: {
        primary: '#3498db',
        secondary: '#2ecc71',
        text: '#333',
    },
};

Step 2: Use ThemeProvider

import { ThemeProvider } from 'styled-components';
import styled from 'styled-components';
import { theme } from './theme';

const Heading = styled.h1`
    color: ${(props) => props.theme.colors.primary};
    text-align: center;
`;

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

export default App;

6. Global Styles

You can define global styles using the createGlobalStyle helper.

Example:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
    body {
        margin: 0;
        font-family: Arial, sans-serif;
    }

    h1 {
        color: #3498db;
    }
`;

function App() {
    return (
        <>
            <GlobalStyle />
            <h1>Hello, Global Styles!</h1>
        </>
    );
}

export default App;

7. Using Styled Components with Animations

Styled Components supports CSS animations through the keyframes utility.

Example:

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

const fadeIn = keyframes`
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
`;

const AnimatedHeading = styled.h1`
    animation: ${fadeIn} 2s ease-in-out;
    color: #3498db;
    text-align: center;
`;

function App() {
    return <AnimatedHeading>Hello, React with Animation!</AnimatedHeading>;
}

export default App;

8. Responsive Design

Styled Components enables responsive design with media queries directly inside components.

Example:

const Container = styled.div`
    width: 100%;

    @media (min-width: 768px) {
        width: 80%;
    }

    @media (min-width: 1200px) {
        width: 60%;
    }
`;

function App() {
    return <Container>Responsive Styled Component</Container>;
}

export default App;

9. Benefits of Styled Components

  1. Scoped Styles: Styles are scoped to components, avoiding global conflicts.
  2. Dynamic Styling: Style components dynamically using props.
  3. Maintainability: Component-based styling aligns well with React’s architecture.
  4. Theming: Easy to implement global themes with ThemeProvider.
  5. CSS Features: Supports all CSS features, including media queries and animations.
  6. No Class Name Collisions: Automatically generates unique class names.

10. Tools and Resources

  • Babel Plugin for Optimization: Install babel-plugin-styled-components to optimize styled components in production. 
    npm install --save-dev babel-plugin-styled-components
  • Styled Components Documentation: https://styled-components.com

Conclusion

Styled Components simplifies managing styles in React by co-locating styles with components, enabling dynamic theming, and enhancing reusability.