How to Inline Style in ReactJS?

React Inline Style

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 check here.

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.

e.g:-

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

Let’s see the example of 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 with 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 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.

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

Leave a Reply

Your email address will not be published. Required fields are marked *