Author avatar

Vivek Kumar

Implementing ReactJS Inline Style Best Practices

Vivek Kumar

  • Jun 20, 2019
  • 7 Min read
  • 364 Views
  • Jun 20, 2019
  • 7 Min read
  • 364 Views
Web Development
React

Introduction

When you are looking for inline style components, there are so many options to choose from that you can choose to experiment with your work to attain assured results.

Yes, trial and error is always an option but if you are working with a stiff deadline and anticipating a refined result, then it is obvious that you are familiar with the grass-roots level concepts associated with animation and programming. In this guide, you will learn how React JS component works with inline styles, what the ideal practices are that you can come across, and how to selectthe right one as per your situational needs and requirements.

The Application

The ReactJS component is a common choice for both budding and veteran professionals in the field of animation. It is due to this very reason that you can find a plethora of choices, in terms of the elements, that are accessible in its libraries.

When you are trying to specify the style pertaining to the React classes, the code can be written as:

1
2
3
4
5
6
7
8
9
10
var MyDiv = React.createClass({
  render: function() {
    var style = {
      color: 'white',
      fontSize: 200
    };

    return <div style = { style } > It is a delicious food! </div>;
  }
});
javascript

Now, when you go through the programming, you are going to find that there are multiple questions that come to mind. For example, is it necessary or advisable to do all the styling in this manner or rather have no style be mentioned in the CSS file? Is it suggested to shun the inline styles absolutely or can one incorporate both?

Well, the good news is that if these questions are crossing your mind then you have no need to get bothered at all. A smart and rational person is used to asking such questions. That is the reason why we are going to discussing the subject in this guide and help you reach a conclusive choice.

For those who are in the search of best approaches to ReactJS inline style, there are certain best practices that are worth mentioning.

When we look around the library comparison of React inline style, following are the approaches that can enable you to make prudent choices.

All (Or Nothing)?

The following are certain components that actually integrate to form style:

  • Appearance: Features and characteristics associated with the component or element.
  • Layout: Where a particular component or element stands in relationship with others.
  • The Behaviour and the State: How a component or element appears in a particular given state.

Commencing with state-styles

It is essential to understand that ReactJS is a platform which is already taking care of the state of your elements. That is the reason why styles of the state and behavior make them a natural pair to coexist with component logic. Here, you have the option to incorporate state-styles in a direct manner, rather than creating components by rendering conditional state classes.

1
2
3
4
5
6
7
8
// Typical component with state-classes
<li 
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />


// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />
javascript

Here, it is crucial to note that the application to get a class’ style appearance is no longer dependent on any sort of .is- prefixed state class meant for state and behavior.

You can apply Object.assign or rather _.extend to include support to avail multiple states:

1
2
3
// Supporting multiple-states with inline-styles
<li 'todo-list__item'
 style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>
javascript

Reusability and Customization

Here, the application of Object.assign is going to take place, making it simple for our concerned component to be reusable along with various styles. In order to overrule the concerned default styles, you can execute call-site with props, such as: <TodoItem dueStyle={ fontWeight: "bold" } />. It will be applied in the following manner:

1
2
3
4
<li 'todo-list__item'
 style={ Object.assign({},
         item.due && styles.due,
         item.due && this.props.dueStyles) } >
javascript

The Layout

If you are seeking a personal opinion, then I would say that there is no concrete reason for making inline layout styles. One can easily find several remarkable CSS layouts in the library. Simply use one to avail the results you want.

It is my suggestion not to include layout styles for the component in a direct form. Simply wrap down the components along with the layout components. For instance:

1
2
3
4
5
6
7
8
9
10
11
12
13
// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
 className = "col-xs-12 col-sm-6 col-md-8"
 firstName = "X"
 lastName = "Y" />

// This is much easier to maintain and change
<div class = "col-xs-12 col-sm-6 col-md-8">
  <UserBadge
   firstName = "X"
   lastName = "Y" />
</ div>
javascript

In order to render support to the layout, the design components have to be at100% height and width.

The Appearance

This feature is arguably the most belligerent part of the "inline-style" discussion. In the end, it is about the element of your design as well as the compatibility of your workforce operating with JS.

Here, is one aspect that I’m quite certain you'll eventually require help for from a library. The states of the browser (:hover, :focus), as well as media-queries, remain a daunting task in terms of raw ReactJS.

The Code Organization

Usually, you are going to find a style object located outside of the module. In the case of a todo-list element, it would appear something like the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}
javascript

The getter Functions

The creation of the getter functions in order to compute styles will appear as the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
React.createClass({
  getStyles: function () {
    return Object.assign(
      {},
      item.props.complete && styles.complete,
      item.props.due && styles.due,
      item.props.due && this.props.dueStyles
    );
  },

  render: function () {
    return <li style = { this.getStyles()}>{this.props.item }</ li>
  }
});
javascript

Conclusion

This guide has successfully incorporated the best practices for ReactJS inline style. From the state-styles to the customization, as well as the layout, appearance, and the getter functions there is nothing vital that has been excluded.

Go through them and add new dimensions to your creative style component. Feedback is always welcome!

0