React Tutorials
React Introduction
React Get Started
React Render HTML
React JSX
React Components
React Class
React Props
React Events
React Conditionals
React Lists
React Forms
React Router
React Memo
React CSS Styling
React Sass Styling
React ES6
React ES6
ES6 Classes
ES6 Arrow Functions
ES6 Variables
ES6 Array Methods
ES6 Destructing
ES6 Spread Operator
ES6 Modules
ES6 Ternary Operator
React Hooks
What is Hook?
useState
useContext
useRef
useReducer
useCallback
useMemo
Custom Hooks
Previous
Styling React Using CSS
There are many ways to style React with CSS, this tutorial will take a closer look at three common ways:
- Inline styling
- CSS stylesheets
- CSS Modules
Inline Styling
To make a style object with an inline style attribute, the value must be a JavaScript object:
Example
Insert an object with the styling information:
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Note: In JSX, JavaScript expressions are enclosed in curved parentheses, and since JavaScript objects use folded parentheses, the style in the example above is written within two sets of curved parentheses {{}}.
camelCased Property Names
Since the CSS inline is written in a JavaScript object, structures with link separators, such as background-color, should be written with the camel case syntax:
Example
Use backgroundColor instead of background-color:
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
JavaScript Object
You can also create an item with style information, and refer to it in the style attribute:
Example
Create a style object named myStyle:
const Header = () => {
const myStyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Sans-Serif"
};
return (
<>
<h1 style={myStyle}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
CSS Stylesheet
You can write your CSS style in a separate file, just save the file with the .css file extension, and import it into your application.
App.css:
Create a new file called "App.css" and insert some CSS code in it:
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Note: You can file whatever you like, just remember the appropriate file extension.
Import style sheet into your app:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
ReactDOM.render(<Header />, document.getElementById('root'));
CSS Modules
Another way to add styles to your app is to use CSS modules.
CSS modules are suitable for sections placed in different files.
CSS within the module is only available in the imported section, and you do not have to worry about word conflicts.
Create a CSS module with the .module.css extension, for example: my-style.module.css.
Create a new file called "my-style.module.css" and insert some CSS code in it:
my-style.module.css:
.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Import style sheet into your section:
Car.js:
import styles from './my-style.module.css';
const Car = () => {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
}
export default Car;
Import a component to your application:
index.js:
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));