React Styling

Learn different ways to add styles to React components.

1. Regular CSS File

Create App.css and import it:

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

import './App.css';

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

2. Inline Styles

Use JavaScript objects:

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

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

Or directly:

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

3. CSS Modules

Create Button.module.css:

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

Use it:

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

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

Dynamic Styling

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!