React is used to make the user interfaces of web apps and applications, and there are many ways to style our React application with CSS.
We can style our React application in the following ways:
Inline CSS
camelCased property names
Javascript object
CSS stylesheet
CSS modules
All of these methods are described below:
We can add inline CSS to our React code in the following two ways:
We'll pass a javascript object to the style attribute. Javascript objects are written inside curly brackets, and as we write this code in JSX, we need to write javascript code in curly braces. Therefore, we'll write the styling in double braces {{}}.
Moreover, as we write the inline CSS in the Javascript object, the properties with two names, such as background-color, must be written in camelCase, for example, backgroundColor.
Let's look at the code below:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Line 7: CSS styles are assigned to the style attribute of the h1 tag. These styles are in the form of a JSON object. Therefore, the CSS style properties with two names, such as background-color must be written in camelCase as backgroundColor.
Line 9: Styles for the bold tag are mentioned.
We can also pass a Javascript object to the style attribute.
Note: Remember we only need one curly braces because we have passed Javascript object which already has its set of curly braces.
In the following example, styles and second_style are both Javascript objects which are then passed to the style attribute in lines 25 and 27, respectively.
Let's look at the code below:
import React from 'react';
// require('./style.css');
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Lines 6–12: A JSON object styles is defined.
Lines 14–20: A JSON object second_style is defined with the CSS styles.
Line 25: JSON object styles with the CSS styles are assigned to the style attribute of the h1 tag.
Line 27: JSON object second_styles with the CSS styles are assigned to the style attribute of the b tag.
We can also make a separate file with the .css extension and then write some CSS styling code in this file. Then we can import this file into the file we need to use this styling.
In the following example, we make a file App.css and write some CSS styling code in it. Then we import this file in App.js (in line 2 of App.js). So, the CSS styling we write in App.css is now applied to the React code in App.js.
Note: We can use any name of our choice for the CSS file. The only restrictions are that the extension of that file should be
.cssand we should use the same name while importing inApp.js.
Let's look at the code below:
body {
background-color: green;
color: white;
font-family: 'Times New Roman';
text-align: left;
}The explanation for the code above is as follows:
Line 2: We have the imports of App.css that contain styles for the HTML body. Therefore, these styles are applied to the text we print in the body.
Line 8: We print "Hello World!" in the h1 tag, which is in the body of this HTML code. As a result, our styles from App.css are applied to this text.
We can also use CSS modules to add styling to our React applications. For this, we make a file with the extension .module.css and add our CSS styling code to this file. Then we import this CSS module file into the file we need to use these styles.
Let's look at the code below:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<App />,
document.getElementById('root')
);
The explanation for the code above is as follows:
Line 2: We import the CSS styles we wrote in app.module.css as style.
Line 8: We use the class name first that we defined in the CSS file. These styles are applied to this h1 tag.
Line 9: We use the class name second that we defined in the CSS file. These styles are applied to this p tag.
React gives us many options to style our React components using CSS. We can use inline CSS or Javascript objects to add styles to our React code. Moreover, we can make separate CSS stylesheets to make our code modular and reuse the same styles in different components of our React app.
Free Resources