💻Lecture Notes of Class 13
CSS in React
Objective
- Understand how to style React
components using different CSS methods.
- Learn and practice three ways
to style components in React:
- Inline styles
- External CSS files
- CSS Modules
Introduction to Styling in React (10
minutes)
- Styling is essential to make
components look good and improve user experience.
- In React, you can style
components in several ways.
- Unlike plain HTML where you
link a CSS file once, React components are modular and reusable, so styles
can be applied locally or globally.
Why different styling methods?
- Inline styles: Quick,
component-specific styles using JavaScript objects.
- External CSS files: Traditional
method, global styles.
- CSS Modules: Scoped CSS to
avoid naming conflicts and provide modular styles.
1. Inline Styles (15 minutes)
- Inline styles are written
directly in the JSX using the style attribute.
- The value of style is a
JavaScript object where:
- CSS property names are
camelCased (e.g., backgroundColor instead of background-color).
- Values are usually strings but
can be numbers for some properties (like width, height).
Syntax example:
function InlineStyledComponent() {
return (
<div style={{ color: 'white', backgroundColor: 'blue', padding: '10px'
}}>
This is an inline styled component.
</div>
);
}
Important notes:
- Inline styles do not
support pseudo-classes (:hover) or media queries.
- Useful for dynamic styles
(e.g., changing colors based on state).
2. External CSS Files (15 minutes)
- External CSS is the traditional
way, where styles are defined in .css files.
- These files are imported into
React components.
- Styles apply globally by
default.
Steps:
1.
Create
a CSS file, e.g., App.css:
.my-class {
color: white;
background-color: green;
padding: 10px;
}
2.
Import
the CSS file in your component:
import './App.css';
function ExternalCSSComponent() {
return (
<div className="my-class">
This is styled using external CSS.
</div>
);
}
Important notes:
- Class names can conflict if
reused in different components.
- Global scope means styles apply
everywhere unless you use unique class names.
3. CSS Modules (15 minutes)
- CSS Modules provide locally
scoped CSS by default.
- Class names are automatically
made unique, preventing conflicts.
- Files are named with .module.css
(e.g., Button.module.css).
How to use CSS Modules:
1.
Create
a CSS Module file, e.g., Button.module.css:
.button {
background-color: orange;
color: white;
padding: 10px;
border-radius: 5px;
}
2.
Import
the module in your React component:
import styles from './Button.module.css';
function ModuleCSSComponent() {
return (
<button className={styles.button}>
Button styled with CSS Modules
</button>
);
}
Important notes:
- Styles are scoped to the
component automatically.
- This prevents conflicts and
improves maintainability.
- Good for medium to large
projects.
Activity (10 minutes)
Task:
Style
the same component using all three methods:
- Create a component StyledComponent.
- Apply inline styles.
- Apply external CSS styles.
- Apply CSS Module styles.
Example structure:
// Inline styles
const inlineStyle = { color: 'white',
backgroundColor: 'purple', padding: '10px' };
function StyledComponent() {
return (
<div>
<div style={inlineStyle}>Inline styled text</div>
<div className="external-style">External CSS styled text</div>
<div className={styles.moduleStyle}>CSS Module styled text</div>
</div>
);
}
Homework
- Convert the inline styles you
used in the component into a CSS Module.
- Create a new .module.css file.
- Move the inline styles into CSS
classes inside this module.
- Import and use the CSS Module
class in your component instead of inline styles.
Summary
|
Styling Method |
Advantages |
Disadvantages |
|
Inline Styles |
Quick, dynamic, scoped |
No pseudo-classes or media queries |
|
External CSS |
Familiar, easy to write |
Global scope, naming conflicts |
|
CSS Modules |
Scoped, avoids conflicts |
Requires build support, setup |
