Inline Style in React

Introduction

By Using Cascading Style Sheets(CSS), we specify how a document is presented in terms of UI and the set of guidelines that govern how an element on a page is formatted. We can improve the aesthetics and functionality of web pages by applying CSS techniques.

In traditional HTML web pages, we can modify the styling of the DOM elements by using inline styling in the following manner:

Here we pass a string to the style attribute.

But this is not the case with React.js. The method to implement inline styling is a bit different in React.js which we will be seeing further in the tutorial.

Styling Components in React

The basic way of styling in React.js is using the className attribute, which is equivalent to using the class in an HTML file. className attribute imports the class from the external stylesheet.

We are importing a custom-style class from the external stylesheet by using the className attribute in the div element.

What is Inline Styling in React.js

When working with React.js there are two ways to implement styling. The first is by making use of the className property, which imports classes from external stylesheets. This method is the same as that of using class attribute when styling in HTML files. Different classes are defined in the external style sheets and can be applied to multiple elements in the application.

The second method is to use inline styling that is implemented by using the style property. The style property accepts a JavaScript object containing fields that specify a React element's style. It is the same as the style attribute we use in HTML for inline styling. The style property is used for styling a particular element in React.js. This method is called inline style in React.

How to Create Inline Styles in React?

Now that we know Inline Styles in React.js let us know the syntax and example code to better understand the Inline Styles in React.js.

Syntax

Following is the syntax for Inline Styles in React.js:

Here the outer curly brackets are the JSX syntax which denotes that this particular code is JavaScript and the curly brackets on the inner side contain the JavaScript object.

Code

Here is an example code for Inline style in React.js:

In the code above, we have passed an object to set color as red and padding as 20 to the style attribute of the div element.

There is another method to add the inline styles in React where we do not define the style object inline, but we create an object to store the styling properties:

Rules for Inline Styling

Since Inline styling in React.js project is different from traditional CSS inline styling, there are some rules that we should follow while applying inline styling in React.js.

When writing any property name in the style object, you have to follow the camel case. So there would be no change in case of single-word property names like color, padding etc., but when the property names are of more than one word like background-color and padding-top we write them as backgroundColor, paddingTop respectively in React.js.

It is important to note that React.js automatically adds px as a suffix to the integer values passed to style properties. For example, you can pass only 10 as a value to the margin property, and React.js will automatically add px after 10. So if you want to specify values in terms of em or rem then you would need to pass 10em in place of only 10. Also, React.js would not add px to every integral value like in zIndex, and the fontWeight property px would not be added as a suffix.

Inline styling properties are not automatically prefixed, which is an essential factor to consider. As a result, your vendor-specific attributes need to be specified by you explicitly for supporting inline styles on the older browsers.

Also, there is the limitation that you cannot use pseudo-classes and media queries with inline styling in React.js.

When to Use Inline Styling?

Inline style in React has a limited scope of application. Inline styling in React should typically only be used for small, one-off changes to a component's appearance. For example, if you want to apply styles on a particular component dynamically based on a state, if you want to apply styles on a conditional basis, then inline styling would be better.

For larger and more consistent styling needs, it is generally recommended to use CSS stylesheets. This allows for better organization and reusability of styles across multiple components.

Let us take an example to better understand the case where we can use inline styling in React.js:

In the code above, we are importing divStyle from an external stylesheet to give basic styling to the div(margin, width, etc.).

By making use of the useState hook, we will hold the state of the color variable, which is initialized with red color; whatever the color user will enter in the input field, the color state gets updated and the updated color will be visible to as the background color of the div, which has the style attribute with customStyle object.

Rule of Thumb

In general, it is considered best practice to avoid using inline styles in React.js. The official documentation of React.js also discourages the use of inline styles in React as the primary source of styling. Instead of using inline styles, using the className(using the CSS stylesheets) attribute is suggested as using className allows for better separation of concerns, making it easier to maintain and scale the styling of a project.

Ready for a Full-Stack Adventure? Join Our Full Stack Course to Blend JavaScript Brilliance with Back-End Wizardry. Enroll Now!