How to use styles in ReactJS ?

18 Oct, 2021
React is a Javascript front-end library that is used to build single-page applications (SPA). React apps can easily be styled by assigning the styles to the className prop. 
There are various ways to style a react app. In this article, we are going to discuss the following four ways to style a react app. 
Using Inline stylesUsing CSS fileUsing CSS moduleUsing styled-components
Using Inline styles
Using CSS file
Using CSS module
Using styled-components
Project Setup – We can create the React app by using the command mentioned below on the command line.
npx create-react-app name_of_the_app
Note: To follow along with the example please delete all the content of App.js and App.css files.
Styling using Inline Styles – In order to apply the inline styles to the elements, we use the style prop. We pass an object with key as CSS properties in camelCase and value as the values that can be assigned to these CSS properties.
Syntax: The syntax to assign inline styles to CSS elements is mentioned below.
<div style={{backgroundColor: 'red'}}></div>
Filename: App.js The content of the App.js file is mentioned in the code given below in which we have added inline styling to the React elements. 
App.js
const App = () => {  return (    <div      style={{        display: "flex",        alignItems: "center",        justifyContent: "center",        height: "100vh",        backgroundImage:           "linear-gradient(to right, #427ceb, #1dad6f)",      }}    >      <h1 style={{ color: "white" }}>GeeksForGeeks</h1>    </div>  );};  export default App;
Step to run the application: Use the following command to start the application.
npm start
Output: Open the browser and go to http://localhost:3000, you will see the following output.
Note: For all below-given examples, the output will remain as above only. Though you can verify it at your end by pasting the content of App.js and App.css files and running the React app on your device.
Styling using CSS file – To style the React elements using the CSS file, we first import the CSS file and then assign the classes contained in the CSS file to the className prop of React elements. 
Syntax: The syntax to assign the classes to the className prop is mentioned below. 
<div className="name_of_the_class"></div>
Filename: App.js The content of App.js and App.css files demonstrating the use of CSS files to style React elements is mentioned below.
App.js
import './App.css';  const App = () => {  return (    <div className='container-div'>      <h1 className='heading'>GeeksForGeeks</h1>    </div>  );};  export default App;
App.css
.container-div {    display: flex;    align-items: center;    justify-content: center;    height: 100vh;    background-image: linear-gradient(          to right, #427ceb, #1dad6f);}  .heading {    color: white;}
Styling using CSS module – CSS modules are a way to locally scope the content of your CSS file. We can create a CSS module file by naming our CSS file as App.modules.css and then it can be imported inside App.js file using the special syntax mentioned below.
Syntax:
import styles from './App.module.css';
Now we can easily assign the classes to the className properties mentioned below.
<div className={styles['container-div']}> 
    <h1 className={styles.heading}>GeeksForGeeks</h1>
</div>
The square bracket is used to access the class when it contains a hyphen or we can use it generally also. The dot can be used to access the class when it does not contain a hyphen. 
Filename: App.js The content of App.js and App.css files demonstrating the use of CSS modules to style the React element is mentioned below.
App.js
import styles from './App.module.css';  const App = () => {  return (    <div className={styles['container-div']}>      <h1 className={styles.heading}>GeeksForGeeks</h1>     </div>  );};  export default App;
App.modules.css
.container-div {    display: flex;    align-items: center;    justify-content: center;    height: 100vh;    background-image: linear-gradient(          to right, #427ceb, #1dad6f);}  .heading {    color: white;}
Styling using styled-components – The styled-components is a third-party package that helps us create a new Styled component based on the React element and CSS styles provided to it. 
Module Installation: In order to use the styled-components you must first install it as a dependency using the following command from the command line.
npm install styled-components
Syntax: To create a styled component you can use the syntax mentioned below.
import styled from 'styled-components';
const GeeksHeading = styled.h1`
  color: white;
`;
The code above will create a new component based on the h1 element and style it with the CSS properties passed to it. The content of the App.js file demonstrating the use of styled-components is mentioned below.
App.js
import styled from 'styled-components';  const PageDiv = styled.div`  display: flex;  align-items: center;  justify-content: center;  height: 100vh;  background-image: linear-gradient(      to right, #427ceb, #1dad6f);`;  const GeeksHeading = styled.h1`  color: white;`;  const App = () => {  return (    <PageDiv>      <GeeksHeading>GeeksForGeeks</GeeksHeading>    </PageDiv>  );};  export default App;
Picked
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Axios in React: A Guide for Beginners
ReactJS useNavigate() Hook
How to do crud operations in ReactJS ?
How to Use Bootstrap with React?
How to install bootstrap in React.js ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Remove elements from a JavaScript Array