React — Styling

Inline Styles

function StyledComponent() {
    const style = {
        color: 'blue',
        fontSize: '20px',
        padding: '10px'
    };

    return <div style={style}>Styled content</div>;
}

CSS Classes

function StyledComponent() {
    return <div className="container">Styled content</div>;
}

CSS Modules

// styles.module.css
.container {
    color: blue;
    padding: 20px;
}

// Component.jsx
import styles from './styles.module.css';

function StyledComponent() {
    return <div className={styles.container}>Styled content</div>;
}

Styled Components

import styled from 'styled-components';

const Container = styled.div`
    color: blue;
    padding: 20px;
    &:hover {
        background-color: lightgray;
    }
`;

function StyledComponent() {
    return <Container>Styled content</Container>;
}

Styling Examples

// Dynamic styles
function DynamicButton({ color, size }) {
    const style = {
        backgroundColor: color,
        padding: size === 'large' ? '20px 40px' : '10px 20px',
        fontSize: size === 'large' ? '18px' : '14px'
    };

    return <button style={style}>Click me</button>;
}

// Conditional styling
function TodoItem({ todo }) {
    const className = todo.completed ? 'completed' : '';

    return (
        <li className={className}>
            {todo.text}
        </li>
    );
}

// Theme provider
const ThemeContext = createContext('light');

function App() {
    const [theme, setTheme] = useState('light');

    return (
        <ThemeContext.Provider value={theme}>
            <div className={`app ${theme}`}>
                <ThemedButton />
            </div>
        </ThemeContext.Provider>
    );
}

function ThemedButton() {
    const theme = useContext(ThemeContext);

    return (
        <button className={`btn btn-${theme}`}>
            Themed Button
        </button>
    );
}

Mini Practice

Write React code that:

1. Uses inline styles
2. Applies CSS classes
3. Uses CSS modules
4. Creates dynamic styles

Up Next

Next: Learn about CSS in React.