Styled Components | Styling

Using styled-components for CSS-in-JS

Styled-components is a library for writing CSS-in-JS. It allows you to define styled components with tagged template literals, making your styles co-located with your component code. This tutorial covers how to use styled-components in React.

Key Points:

Styled-components is a library for writing CSS-in-JS.
It allows you to define styled components with tagged template literals.
Styled-components makes your styles co-located with your component code.
It supports theming and dynamic styling based on props.

Installing styled-components

First, install styled-components using npm or yarn:

npm install styled-components
# or
yarn add styled-components

Creating Styled Components

Use the styled object to create styled components. The styled object contains methods for each HTML element.

// Creating styled components
import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
    background-color: #f4f4f4;
    padding: 20px;
`;

const Title = styled.h1`
    color: #333;
`;

function App() {
    return (
        <Container>
            <Title>Hello, World!</Title>
        </Container>
    );
}

export default App;

Dynamic Styling with Props

Styled-components supports dynamic styling based on props. You can access props within your styled component definitions to apply conditional styles.

// Dynamic styling with props
import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
    background-color: ${props => props.primary ? '#4CAF50' : '#f4f4f4'};
    color: ${props => props.primary ? 'white' : '#333'};
    padding: 15px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
        background-color: ${props => props.primary ? '#45a049' : '#e7e7e7'};
    }
`;

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

export default App;

Theming with styled-components

Styled-components supports theming through the ThemeProvider. You can define a theme and pass it to your components using the ThemeProvider.

// Theming with styled-components
import React from 'react';
import styled, { ThemeProvider } from 'styled-components';

const theme = {
    primaryColor: '#4CAF50',
    secondaryColor: '#f4f4f4'
};

const Container = styled.div`
    background-color: ${props => props.theme.secondaryColor};
    padding: 20px;
`;

const Button = styled.button`
    background-color: ${props => props.theme.primaryColor};
    color: white;
    padding: 15px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
`;

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

export default App;

Extending Styles

Styled-components allows you to extend the styles of an existing component using the styled object.

// Extending styles with styled-components
import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
    background-color: #4CAF50;
    color: white;
    padding: 15px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
`;

const PrimaryButton = styled(Button)`
    background-color: #2196F3;
`;

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

export default App;

Full Example

Here is a complete example of using styled-components in a React application:

// App.js
import React from 'react';
import styled, { ThemeProvider } from 'styled-components';

const theme = {
    primaryColor: '#4CAF50',
    secondaryColor: '#f4f4f4'
};

const Container = styled.div`
    background-color: ${props => props.theme.secondaryColor};
    padding: 20px;
`;

const Title = styled.h1`
    color: #333;
`;

const Button = styled.button`
    background-color: ${props => props.primary ? props.theme.primaryColor : '#f4f4f4'};
    color: ${props => props.primary ? 'white' : '#333'};
    padding: 15px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
        background-color: ${props => props.primary ? '#45a049' : '#e7e7e7'};
    }
`;

function App() {
    return (
        <ThemeProvider theme={theme}>
            <Container>
                <Title>Styled Components in React</Title>
                <Button primary>Primary Button</Button>
                <Button>Secondary Button</Button>
            </Container>
        </ThemeProvider>
    );
}

export default App;

Summary

In this tutorial, you learned how to use styled-components for CSS-in-JS in React. Styled-components allows you to define styled components with tagged template literals, making your styles co-located with your component code. You learned how to install styled-components, create styled components, apply dynamic styling with props, use theming, and extend styles. Understanding styled-components is essential for writing clean, maintainable, and scalable CSS in React applications.

React - Styled Components