Styles

noreply@example.com (AG Sayyed) — Tue, 29 Jul 2025 09:27:38 +0000

Styles in React

In React, styles can be applied to components in various ways, including inline styles, CSS stylesheets, CSS modules, and styled-components. Each method has its own use cases and advantages.

Inline Styles

Inline styles are defined directly within the component using a JavaScript object. This method is useful for dynamic styles that depend on component state or props.

 1function MyComponent() {
 2 const style = {
 3 color: 'blue',
 4 backgroundColor: 'lightgray',
 5 padding: '10px',
 6 borderRadius: '5px'
 7 }
 8
 9 return <div style={style}>Hello, World!</div>
10}
11// Or
12function MyComponent() {
13 return (
14 <div
15 style={{
16 color: 'blue',
17 backgroundColor: 'lightgray',
18 padding: '10px',
19 borderRadius: '5px'
20 }}
21 >
22 <p style={{ margin: 0 }}>Hello, World!</p>
23 </div>
24 )
25}

Inline styles are defined as a JavaScript object.
Property names are written in camelCase (e.g., backgroundColor).
Values are specified as strings.

CSS Modules

CSS Modules allow you to write CSS that is scoped locally to the component, preventing style conflicts. They are implemented as a file with a .module.css extension.

Styles on Ghafoor's Personal Blog

Styles

Styles in React

Inline Styles

CSS Modules