React Styling Techniques

# React Styling Techniques

1. Introduction #

2. Learning Objectives #

• Apply standard external CSS stylesheets to React.

• Use Inline Styles with JavaScript objects.

• Dynamically change styles based on React state.

• Understand the pros and cons of different styling approaches.

3. Beginner-Friendly Explanations #

Approach 1: Traditional CSS Files #

Approach 2: Inline Styles #

4. Syntax Explanation #

Using External CSS #

.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 20px;
}

App.jsx ```jsx id="ch15_ex1" import './styles.css'; // Import the CSS file!

function App() { // Use className instead of class return <div className="card">Hello World</div>; }

### Using Inline Styles
Because inline styles are objects, you need two sets of curly braces. The outer braces tell JSX "I am injecting JavaScript". The inner braces are the actual object literal.

jsx id="ch15_ex2" function InlineDemo() { return ( <div style={{ backgroundColor: 'blue', color: 'white', padding: '10px' }}> I am styled inline! </div> ); }

*Note: Numbers are usually interpreted as pixels by React (e.g., `padding: 10` becomes `10px`).*

### Dynamic Styling with State
Because inline styles are just JavaScript, you can easily tie them to React State!

jsx id="ch15_ex3" import { useState } from 'react';

function DynamicStyle() { const [isActive, setIsActive] = useState(false);

// Define an object based on state const btnStyle = { backgroundColor: isActive ? 'green' : 'gray', color: 'white', padding: '10px 20px', border: 'none', cursor: 'pointer' };

return ( <button style={btnStyle} onClick={() => setIsActive(!isActive)}> Toggle Color </button> ); }

## 5. Output Explanations
In `DynamicStyle`, clicking the button flips `isActive`. React recalculates the `btnStyle` object and updates the DOM, instantly changing the button's background color. This is powerful because it bridges the gap between logic and visuals.

## 6. Real-World Examples
- **External CSS:** Used for global styling (e.g., reset CSS, typography, standard grid layouts).
- **Inline Styles:** Used for highly dynamic visual elements that change frequently (e.g., a progress bar where `width: ${progress}%` is tied directly to state).

## 7. Common Mistakes
- **Using `class` instead of `className`:** Causes console warnings.
- **Stringifying inline styles:** `<div style="color: red">` will crash React. You must use an object: `<div style={{color: 'red'}}>`.
- **Forgetting camelCase:** Writing `{ background-color: 'red' }` is invalid JavaScript syntax. It must be `backgroundColor`.

## 8. Best Practices
- **Avoid heavy use of inline styles.** They are hard to read, lack features like pseudo-classes (`:hover`), and don't scale well. Use them only for highly dynamic values.
- **Use Template Literals for dynamic classes:** Instead of inline styling, you can apply classes dynamically: `className={"btn " + (isActive ? "btn-active" : "btn-inactive")}`.

## 9. Exercises
1. Create a React component that imports an external CSS file to style an `<h1>`.
2. Add an inline style to a paragraph tag setting the `fontSize` to `24px` and `fontWeight` to `'bold'`.

## 10. Mini Project: Styled Dashboard Cards
Let's build a component that uses template literals to apply dynamic CSS classes based on props.

**Card.css**

css .dash-card { padding: 24px; border-radius: 12px; color: white; margin-bottom: 16px; font-family: sans-serif; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

.theme-primary { background-color: #4f46e5; } .theme-success { background-color: #10b981; } .theme-danger { background-color: #ef4444; }

**Dashboard.jsx**

jsx id="ch15_proj1" // Example React component import React from 'react'; import './Card.css'; // Assuming the CSS is in the same folder

const StatCard = ({ title, value, theme }) => { // Dynamically combining the base class with the theme class const classNames = dash-card theme-${theme};

return ( <div className={classNames}> <h3 style={{ margin: 0, opacity: 0.8, fontSize: '14px', textTransform: 'uppercase' }}> {title} </h3> <h2 style={{ margin: '10px 0 0 0', fontSize: '32px' }}> {value} </h2> </div> ); };

export default function Dashboard() { return ( <div style={{ padding: '40px', maxWidth: '800px', margin: '0 auto', display: 'flex', gap: '20px' }}> <StatCard title="Total Users" value="14,231" theme="primary" /> <StatCard title="Revenue" value="$42,500" theme="success" /> <StatCard title="Errors" value="3" theme="danger" /> </div> ); } ``

Q2: Why must inline styles be wrapped in double curly braces {{}}? A) To increase specificity. B) The outer braces evaluate JavaScript, and the inner braces represent a JavaScript Object. C) It is a requirement of Babel. *Answer: B*