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.
e.g:-
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.
