How to use Inline Styles in React ?
Last Updated :
04 Apr, 2024
ReactJS is a JavaScript library that is used to build a user interface. React makes it easy to create an interactive user interface by using a component-based approach. It offers various ways to apply styles to components. One of the methods is using inline styles, where styles are defined directly within the components as JavaScript objects.
We are going to learn about the following approaches to use inline styles in React:
Style Object
In this approach, Style is defined in a JavaScript object and directly applied within the JSX. You can also directly write the object inside style attribute.
Syntax:
import React from 'react';
const MyComponent = () => {
const styles = {
color: 'green',
fontSize: '16px',
border: '1px solid black',
};
return (
<div style={styles}>
This component has inline styles.
</div>
);
};
export default MyComponent;
Template Literals with JavaScript Expressions
In this approach, Template literals allows dynamic styles based on JavaScript expressions. This approach is particularly useful when styles need to be calculated or based on certain conditions.
Syntax:
import React from 'react';
const MyComponent = () => {
const fontSize = 16;
return (
<div style={{
color: 'green',
fontSize: `${fontSize}px`,
border: '1px solid black',
}}>
This component has dynamic inline styles.
</div>
);
};
export default MyComponent;
Styled Components
In this approach, ReactJS supports various libraries like Styled Components. These libraries enable the creation of styled components with a more structured and modular approach. To use styled-components library, you have to install it using the following command.
npm install styled-components
Syntax:
// Using Styled Components
import styled from 'styled-components';
const StyledDiv = styled.div`
color: green;
font-size: 18px;
border: 1px solid black;
`;
const MyComponent = () => {
return (
<StyledDiv>
This component is styled using Styled Components.
</StyledDiv>
);
};
export default MyComponent;
Steps to Create React Application
Step 1: Create a React application using the following command:
npx create-react-app gfg
Step 2: After creating your project folder(i.e. gfg), move to it by using the following command:
cd gfg
Example: This below example demonstrate Inline Styles in ReactJS App.js
JavaScript
//File path: src/App.js
import React from 'react';
const App = () => {
const styles = {
color: 'green',
borderBottom: '2px solid black',
marginLeft:'20px'
};
let fontSize = '15px';
let leftMargin = '20px';
return (
<>
<h1 style={styles}>
GeeksforGeeks
</h1>
<p style={{ fontSize: `${fontSize}`,
marginLeft: `${leftMargin}` }}>
This is a example of Template Literals with
JavaScript Expressions (Dynamic Styles)
</p>
</>
);
};
export default App;
To run the application use the following command:
npm run start
Output: Now go to http://localhost:3000 in your browser.

Similar Reads
How To Use Inline Styles in ReactJS? Inline styles in React allow you to directly apply CSS styles to elements using the style attribute. This is often used for dynamic styling, where styles need to be applied based on the component's state or props. Inline styles in React are written as JavaScript objects. Each CSS property is camelCa
3 min read
How to use styles in ReactJS ? React is a popular JavaScript library for building single-page applications (SPAs) with dynamic user interfaces. Styling in React can be done in various ways, each with its advantages. In this article, we will explore different approaches to applying styles in React, including inline styles, CSS fil
4 min read
How to use Radium in React app for inline styling? Radium is a popular npm package for React which allows us to use inline styling with pseudo selectors and media queries. Without this third party package, one can not do inline styling with pseudo selectors because React doesn't allow us to use pseudo-selectors in inline styling. Examples of pseudo-
2 min read
How to use innerHtml in React JS ? React.js provides a easy way of handling UI updates. However, sometimes you need to inject HTML directly into your components. PrerequisitesIntroduction to ReactReact ComponentsReact HooksNPM or NPXIn this article, we are going to learn how can we use InnerHTML in React JS. We can add HTML into Reac
2 min read
How to Set z-index Value in React JS ? This article explores setting the z-index attribute in React, a CSS property influencing the stacking order of HTML elements for visibility control. In React, adjusting the z-index attribute enables effective management of stacking contexts within the application. We will discuss the following two a
3 min read