Home > ReactJS > How to Inline Style in ReactJS?

How to Inline Style in ReactJS?

The style means how your page looks at the front end. We can style our webpage with CSS (Cascading Style Sheets). With the help of CSS, we can design our documents, can set the rules of design for a specific element. We can format the elements of the webpage.

So, in this article, we will learn how to design a webpage and inline style in reactjs.

If you are beginners and don’t know how to install ReactJS then read this article
How to install ReactJS and Create an App?.

Methods of Styling Webpage in ReactJS

There are many ways to style the webpage in ReactJs but in this tutorial, we will learn about inline style in reactjs.

Common useful methods for styling:

  • Inline CSS
  • CSS with JS
  • CSS Stylesheet file

In this tutorial, we will cover only Inline Style and for the other two methods you can define CSS in the JS component and create a different CSS file in the public directory, and link in the index file (main file).

Inline Style in ReactJS

Inline style means defining the CSS rules for the element using a style attribute in an HTML. In the plain HTML tag, we assign a style attribute to any tag containing the CSS properties rule. See the plain HTML page example with inline CSS.

In the above example, we write a <p> tag with the style attribute and gave a CSS rules to that <p> tag.

Now, come to the main point is that inline style with react. We cannot specify the incline CSS rules the same as we did in plain HTML. We cannot write plain HTML in react, we have to write JSX. For more detail about JSX learn here.

The style attribute accept JavaScript objects and the object will be in camelCased properties. You cannot write directly CSS string with property value pairs.


1 text-align = textAlign
2 padding-top = paddingTop
3 border-radius = borderRadius
4 background-color = backgroundColor

Let’s see the example of the inline style in reactjs components.

We created a javascript object with CSS properties and values and assigned that object in the style attribute of <div> tag.

Dynamically Inline Style Property

Let’s try playing dynamically inline-style property. If you want to add style based on the specific condition then you have to make inline if condition in the style attribute.

e.g:- If we want to change the background color to red on the basis of condition true rather than will be the blue background color.

Let’s see the example:

In the above code, it will check the menu items which one is active and change the color of that menu item.

I hope you understand how to Inline Style in ReactJS! if you have any questions about this article then you can ask me in the comment section, I’ll respond to you as soon as possible.

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment