# How to set inline Styles in React.js

This article will show you how to set inline styles in React.js in two ways: set inline styles or pass a variable for modal styles. Please read the article to know more about how to do it and follow detailed code examples.

Table of Contents

## How to set inline Styles in React.js

A particular HTML tag uses an inline style. A particular HTML tag is styled with the help of the style attribute. There are better ways to use CSS than this because each HTML tag needs to be styled independently. Managing your website will be very difficult if you only use inline CSS. For instance, if you need to style just one element and don’t have access to the CSS file.

### Set inline-style

This way, we will write a straight inline style on each element we want to style. This approach has the following advantages and disadvantages.

Advantages of Inline CSS:

• Useful if you want to test or preview changes.
• Useful for quick fixes.
• Fewer HTTP requests.

Disadvantages of Inline CSS:

• Inline CSS must be applied to each element

Follow the following code to see the syntax of setting inline styles in React.js

Code:

const App = () => {
return (
<div>
<h2 style={{ color: "red" }}>Welcome to LearnShareIT!!</h2>
<p>Click to send :</p>
<button
style={{ backgroundColor: "green", color: "white", width: "100px" }}
>
Send
</button>
</div>
);
};

export default App;

Output:

This way, we will have to write the style on each element we need to change the CSS. You need to create an object that passes the element’s style property, with the key-value ​​being its properties and corresponding values. JSX will automatically get the styles you set for each element. However, you can see that you will code the inline style directly into the HTML part. This won’t be easy to maintain so you can refer to the following method.

### Passing a variable to the style method

This way, you will overcome the maintenance difficulty of writing directly to the element. We will create variables corresponding to each element to save the styles that need to be set for the element and pass it in the style attribute.

Code:

const App = () => {
const titleStyle = { color: "red" };
const buttonStyle = { backgroundColor: "green", color: "white", width: "100px" };

return (
<div>
<h2 style={titleStyle}>Welcome to LearnShareIT!!</h2>
<p>Click to send :</p>
<button
style={buttonStyle}
>
Send
</button>
</div>
);
};

export default App;

By doing this, we still return the same result as writing the inline style directly into the element. However, if you want to add, edit, or remove styles of elements, you need to look at the style variable declaration and make changes here. You won’t need to go to each element in the HTML to edit them one by one, good luck with the methods mentioned in the article.

## Summary

To sum up, the article showed you how to set inline styles in React.js. However, by passing a variable to the style method, you will quickly change the styles.