🎨 React Styling - Complete Guide

/* Button.module.css */
.button {
    background-color: #e1bee7;
    color: #4a148c;
    padding: 12px 24px;
    border: 2px solid #9c27b0;
    border-radius: 8px;
    font-weight: bold;
}

.button:hover {
    background-color: #ce93d8;
    transform: scale(1.05);
}

/* Button.js */
import styles from './Button.module.css';

function Button() {
    return <button className={styles.button}>Click Me</button>;
}

/* Multiple classes */
<div className={`${styles.card} ${styles.active}`}>Content</div>

import styled from 'styled-components';

// Basic styled component
const Button = styled.button`
    background-color: ${props => props.primary ? '#61dafb' : '#gray'};
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
`;

// Extending styles
const PrimaryButton = styled(Button)`
    background-color: #61dafb;
    font-weight: bold;
`;

// Using with props
function App() {
    return (
        <>
            <Button primary>Primary Button</Button>
            <Button>Secondary Button</Button>
            <PrimaryButton>Extended Button</PrimaryButton>
        </>
    );
}

// Theming support
import { ThemeProvider } from 'styled-components';

const theme = {
    colors: {
        primary: '#61dafb',
        secondary: '#282c34',
    }
};

const ThemedButton = styled.button`
    background: ${props => props.theme.colors.primary};
`;

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

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';

// Method 1: css prop
const buttonStyle = css`
    background-color: #b2dfdb;
    color: #004d40;
    padding: 12px 24px;
    border: 2px solid #00796b;
    border-radius: 8px;
    cursor: pointer;
    
    &:hover {
        background-color: #80cbc4;
    }
`;

function App() {
    return <button css={buttonStyle}>Click Me</button>;
}

// Method 2: styled API
const Button = styled.button`
    background-color: #b2dfdb;
    color: #004d40;
    padding: 12px 24px;
    border: 2px solid #00796b;
    border-radius: 8px;
`;

// Method 3: Object styles
const objectStyle = css({
    backgroundColor: '#b2dfdb',
    color: '#004d40',
    padding: '12px 24px',
    '&:hover': {
        backgroundColor: '#80cbc4'
    }
});

// Composition
const baseButton = css`
    padding: 12px 24px;
    border-radius: 8px;
`;

const primaryButton = css`
    ${baseButton}
    background-color: #61dafb;
    color: white;
`;

// Basic usage
function Button() {
    return (
        <button className="bg-blue-500 hover:bg-blue-700 text-white 
                          font-bold py-2 px-4 rounded 
                          transition duration-300 ease-in-out
                          transform hover:scale-105">
            Click Me
        </button>
    );
}

// Responsive design
function Card() {
    return (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div className="bg-white p-6 rounded-lg shadow-md">
                Card 1
            </div>
        </div>
    );
}

// Dark mode support
function DarkModeExample() {
    return (
        <div className="bg-white dark:bg-gray-800 
                       text-black dark:text-white">
            Content
        </div>
    );
}

// Custom classes with @apply
/* styles.css */
@layer components {
    .btn-primary {
        @apply bg-blue-500 hover:bg-blue-700 text-white 
               font-bold py-2 px-4 rounded;
    }
}

// Material UI Example
import { Button, TextField, Card, CardContent } from '@mui/material';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import DeleteIcon from '@mui/icons-material/Delete';

const theme = createTheme({
    palette: {
        primary: {
            main: '#61dafb',
        },
        secondary: {
            main: '#ff6b6b',
        }
    },
});

function App() {
    return (
        <ThemeProvider theme={theme}>
            <Card>
                <CardContent>
                    <TextField 
                        label="Name" 
                        variant="outlined" 
                        fullWidth 
                        margin="normal"
                    />
                    <Button 
                        variant="contained" 
                        color="primary"
                        startIcon={<DeleteIcon />}
                    >
                        Submit
                    </Button>
                </CardContent>
            </Card>
        </ThemeProvider>
    );
}

// Chakra UI Example
import { Button, Input, Box, Stack, useColorMode } from '@chakra-ui/react';

function App() {
    const { colorMode, toggleColorMode } = useColorMode();
    
    return (
        <Box p={8} bg={colorMode === 'light' ? 'white' : 'gray.800'}>
            <Stack spacing={4}>
                <Input placeholder="Enter name" size="lg" />
                <Button colorScheme="blue" size="lg">
                    Submit
                </Button>
                <Button onClick={toggleColorMode}>
                    Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
                </Button>
            </Stack>
        </Box>
    );
}

// Ant Design Example
import { Button, Input, Card, Space } from 'antd';
import { DeleteOutlined, SearchOutlined } from '@ant-design/icons';

function App() {
    return (
        <Card title="User Form" style={{ width: 400 }}>
            <Space direction="vertical" style={{ width: '100%' }}>
                <Input 
                    placeholder="Enter name" 
                    prefix={<SearchOutlined />}
                    size="large"
                />
                <Button 
                    type="primary" 
                    icon={<DeleteOutlined />}
                    size="large"
                    block
                >
                    Submit
                </Button>
            </Space>
        </Card>
    );
}