Styling Components in React
From the React Components & JSX cheat sheet · Optimization & Advanced Features · verified Jul 2026
Styling Components
Different approaches to styling React components
javascript
// Inline Styles
<div style={{ backgroundColor: 'blue', padding: '10px' }}>
Inline styled
</div>
// CSS Classes
<div className="card primary-card">
CSS Classes
</div>
// CSS Modules
import styles from './Component.module.css'
<div className={styles.card}>CSS Module</div>
// Styled Components
import styled from 'styled-components'
const Button = styled.button`
background: ${props => props.primary ? 'blue' : 'gray'};
color: white;
padding: 10px;
`⚛️ Choose styling approach based on project needs
💡 CSS Modules provide scoped styles without runtime cost
📌 CSS-in-JS offers dynamic styling with JS power
⚠️ Inline styles can't use pseudo-classes or media queries
⚡ Utility-first CSS (Tailwind) for rapid development