Inline Styling with React

Jul 31, 2020 • 5 Minute Read

Introduction

In frontend projects, which seldom require the use of a single-page app, inline styles of DOM elements are often placed in the style="property:value" attribute of the target element. But in React, things are quite different when it comes to styling inline. This guide focuses on exactly how to achieve that using a real-world example of building a user profile card component.

Let's get started!

Styling Components in React

You may already be aware of the regular way of styling React components using the className attribute coupled with an external stylesheet as follows:

      import React from "react"
import './style.css'

function myComponent(){
      return(

           return <p className="paragraph-text">ClassName Styled Text</p>
     )
}
    

      .paragraph-text{
   font-weight: bold;
   color: beige;
}
    

Inline Styles

Achieving the same results with inline styles works quite differently. To use inline styles in React, use the style attribute, which accepts a Javascript object with camelCased properties. Example:

      function MyComponent(){

return <div style={{ color: 'blue', lineHeight : 10, padding: 20 }}> Inline Styled Component</div>

}

Notice that the value of padding does not have a unit as React appends a 'px' suffix to some numeric inline style properties. In cases where you need to use other units, such as 'em' or 'rem', specify the unit with the value explicitly as a string. Applying that to the padding property should result in padding: '1.5em'. In addition, these styles are not vendor-prefixed automatically, so you have to add vendor prefixes manually.

Improving Readability

The readability of MyComponent reduces dramatically if styles become a lot and everything gets clunky. Since styles are mere objects, they can be extracted out of the component as shown below.

      const myComponentStyle = {
   color: 'blue',
   lineHeight: 10,
   padding: '1.5em',
}

function MyComponent(){

     return <div style={myComponentStyle}> Inline Styled Component</div>

}
    

Building a Card Component

Enough talk! Let's build the user card component.

      const cardStyles = {
  container: {
    display: "flex",
    height: 100,
    width: 400,
    boxShadow: "0 0 3px 2px #cec7c759",
    alignItems: "center",
    padding: 20,
    borderRadius: 20,
  },
  profilePicture: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "orange",
    color: "white",
    height: 20,
    width: 20,
    borderRadius: "50%",
    padding: 10,
    fontWeight: "bold",
  },
  bio: {
    marginLeft: 10,
  },
  userName: {
    fontWeight: "bold",
  },
};

function userCardComponent(){

         <div style={cardStyles.container}>
        <span style={cardStyles.profilePicture}>D</span>
        <div style={cardStyles.bio}>
          <p style={cardStyles.userName}>Desmond Nyamador</p>
          <p>I just learned an easy way to style React Components</p>
        </div>
      </div>

}
    

Rule of Thumb

The official React documentation frowns upon the use of inline styling as a primary means of styling projects and recommends the use of the className attribute instead.

Note: Some examples in the documentation use style for convenience, but using the style attribute as the primary means of styling elements is generally not recommended. In most cases, className should be used to reference classes defined in an external CSS stylesheet. style is most often used in React apps to add dynamically computed styles at render time.

Conclusion

Well, that's a wrap! In this guide, you were introduced to the concept of inline styling in React. If you would like to read more on this, you can visit the the React docs for more details: React Styling.

Feel free to ping me on Twitter as well: Desmond Nyamador.

Learn More

Check out these React courses from Pluralsight to continue learning: