What are the different ways to style a React component?
There are several ways to style React components. Here are some of the most common methods, each with a brief example:
1. Inline Styles
You can apply inline styles directly to elements in React using the style
attribute. The styles are passed as an object where the property names are camelCased.
Example:
function InlineStyleComponent() {
return (
<div style={{ backgroundColor: 'lightblue', padding: '20px', textAlign: 'center' }}>
<h1 style={{ color: 'darkblue' }}>Inline Styling in React</h1>
</div>
);
}
Output:
A div
with a light blue background, centered text, and a dark blue header.
2. CSS Stylesheets
You can write traditional CSS in an external stylesheet and import it into your component.
Example:
styles.css:
.container {
background-color: lightcoral;
padding: 20px;
text-align: center;
}
.title {
color: darkred;
}
Component.js:
import './styles.css';
function CSSStylesheetComponent() {
return (
<div className="container">
<h1 className="title">CSS Stylesheet in React</h1>
</div>
);
}
Output:
A div
with a light coral background and a dark red header.
3. CSS Modules
CSS Modules are scoped to the component where they are imported, preventing name clashes in large applications.
Example:
Component.module.css:
.container {
background-color: lightgreen;
padding: 20px;
text-align: center;
}
.title {
color: darkgreen;
}
Component.js:
import styles from './Component.module.css';
function CSSModulesComponent() {
return (
<div className={styles.container}>
<h1 className={styles.title}>CSS Modules in React</h1>
</div>
);
}
Output:
A div
with a light green background and a dark green header, scoped only to this component.
4. Styled Components
Styled Components is a library that allows you to write actual CSS in your JavaScript by utilizing tagged template literals.
Example:
import styled from 'styled-components';
const Container = styled.div`
background-color: lightyellow;
padding: 20px;
text-align: center;
`;
const Title = styled.h1`
color: darkorange;
`;
function StyledComponentsExample() {
return (
<Container>
<Title>Styled Components in React</Title>
</Container>
);
}
Output:
A div
with a light yellow background and a dark orange header.
5. Sass/SCSS
Sass is a preprocessor scripting language that is interpreted or compiled into CSS. You can use .scss
or .sass
files with React by configuring a Sass loader or using tools like Create React App, which supports Sass out of the box.
Example:
styles.scss:
$bg-color: lightpink;
$text-color: darkmagenta;
.container {
background-color: $bg-color;
padding: 20px;
text-align: center;
.title {
color: $text-color;
}
}
Component.js:
import './styles.scss';
function SCSSExample() {
return (
<div className="container">
<h1 className="title">Sass/SCSS in React</h1>
</div>
);
}
Output:
A div
with a light pink background and a dark magenta header.
6. CSS-in-JS (Emotion, JSS)
CSS-in-JS libraries like Emotion or JSS allow you to write CSS directly within your JavaScript files, similar to styled-components but with more flexibility in terms of themes and dynamic styling.
Example with Emotion:
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
const containerStyle = css`
background-color: lightgray;
padding: 20px;
text-align: center;
`;
const titleStyle = css`
color: darkgray;
`;
function EmotionExample() {
return (
<div css={containerStyle}>
<h1 css={titleStyle}>Emotion in React</h1>
</div>
);
}
Output:
A div
with a light gray background and a dark gray header.
7. Tailwind CSS
Tailwind is a utility-first CSS framework that allows you to apply styles directly via class names.
Example:
function TailwindExample() {
return (
<div className="bg-blue-200 p-5 text-center">
<h1 className="text-blue-700">Tailwind CSS in React</h1>
</div>
);
}
Output:
A div
with a light blue background and a blue header, using Tailwind utility classes.
These methods offer a range of flexibility depending on the complexity of your styling needs, from simple inline styles to advanced CSS-in-JS solutions.
At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.
Terms Disclaimer About Us Contact Us
Copyright 2023-2025 © All rights reserved.