React Styling

Learn different ways to add styles to React components.

1. Regular CSS File

Create **App.css** and import it:

```css .button { background: blue; color: white; padding: 10px 20px; } ```

```javascript import './App.css';

function App() { return <button className="button">Click</button>; } ```

2. Inline Styles

Use JavaScript objects:

```javascript function Button() { const style = { background: 'blue', color: 'white', padding: '10px 20px' };

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

Or directly:

```javascript <button style={{background: 'blue', color: 'white'}}> Click </button> ```

3. CSS Modules

Create **Button.module.css**:

```css .button { background: blue; color: white; } ```

Use it:

```javascript import styles from './Button.module.css';

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

Dynamic Styling

```javascript function Button({ isPrimary }) { return ( <button style={{ background: isPrimary ? 'blue' : 'gray', color: 'white' }}> Click </button> ); } ```

Remember

- Use className, not class - Inline styles use camelCase (backgroundColor) - CSS Modules prevent naming conflicts

> Next: Learn React useEffect hook!