Styling Your First React Component — A Gentle Introduction

“You don’t need to know every CSS trick to make a React app look good—just enough to feel confident shipping your first component.”


— Elram Gavrieli

Why this post?

When I started learning React, I quickly realised the JavaScript part wasn’t my only hurdle—


the styling side felt just as daunting.


If you’re in the same boat, this guide walks through three beginner-friendly ways to style a component, from plain CSS to the ever-popular styled-components.

1. Plain CSS file (external stylesheet)

1. 
   

   Create a file called Button.css:
   
   

   
   
   

   /* Button.css */
   
   .btn {
   
     padding: 0.5rem 1rem;
   
     border: none;
   
     cursor: pointer;
   
     border-radius: 4px;
   
   }
   
   

   
   
   
   
   
   



2. 
   
   

   Import it in your component:
   
   

   
   
   

   import "./Button.css";
   
   
   
   export default function Button({ children }) {
   
     return <button className="btn">{children}</button>;
   
   }
   
   

   
   
   
   
   
   

Pros: Familiar syntax, easy to tweak in DevTools.


Cons: Global scope—class-name collisions happen fast.

2. CSS Modules (scoped classes)

1. 
   

   Create Button.module.css:
   
   

   
   
   

   /* Button.module.css */
   
   .btn {
   
     padding: 0.5rem 1rem;
   
     border-radius: 4px;
   
   }
   
   

   
   
   
   
   
   



2. 
   
   

   Use it in the component:
   
   

   
   
   

   import styles from "./Button.module.css";
   
   
   
   export default function Button({ children }) {
   
     return <button className={styles.btn}>{children}</button>;
   
   }
   
   

   
   
   
   
   
   

Why it’s cool: The build step renames .btn to something unique like


Button_btn__a1b2c, so no class clashes.

3. Styled Components (CSS-in-JS)

1. 
   

   Install once:
   
   

   
   

   npm i styled-components
   
   

   
   
   


2. 
   

   Create a styled button:
   
   

   
   

   import styled from "styled-components";
   
   
   
   const Btn = styled.button`
   
     padding: 0.5rem 1rem;
   
     border-radius: 4px;
   
     border: none;
   
     cursor: pointer;
   
   `;
   
   
   
   export default function Button({ children }) {
   
     return <Btn>{children}</Btn>;
   
   }
   
   

   
   
   

Upside: Styles live right next to your JSX; dynamic props let you theme easily.


Trade-off: Slightly larger bundle, new syntax to learn.

Which one should you start with?

Final thoughts

Pick the method that feels least intimidating, experiment, and ship something small.


The confidence boost you get from seeing a nicely-styled button in your own React app is priceless.

Have questions? Drop a comment—I’m learning out loud right here with you.

Further reading

• React Docs — Adding CSS Styling
  


• Dave Ceddia — “CSS Modules for React Components”
  


• styled-components — Official docs
  

Thanks for reading! If you found this useful, hit the ❤️ and follow along as I tackle the next React hurdle.