Applying Inline Styles with React.js

Introduction

Cascading Style Sheets, commonly known as CSS, is a major building block of web development.

With CSS, we can define the presentation of a document, the set of rules that control the formatting of an element on a webpage. By using CSS techniques, we can make web pages more appealing and efficient.

Before jumping in, let's discuss a bit about React. It's a popular JavaScript library for building user interfaces. It basically handles the view-layer of the application. The best part is that it allows you to break a component into smaller, reusable components. Instead of putting all the logic into a single file, writing smaller components has a better edge. By writing well-encapsulated components, we are essentially making a testable app with a good separation of concerns and maximum code reuse.

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.

Using inline styles in JSX

Let's start with inline styles.

Inline-styles are used when a single HTML element needs unique styles. Whenever there is more than one element with that exact same style, it is advised to use CSS classes instead.

Inline-styles are not reacting specifically They are a regular HTML feature:

<p style="color: red">TechvBlogs</p>

However, we have to use it a little bit differently in react. Instead of passing a string with all the styles to the attribute, we need to assign an object:

render() {
    return (
         <p style={{color: 'red'}}>
            TechvBlogs
        </p>
    );
}

Notice, that the outer brace is the regular "this is JavaScript" JSX syntax. The inner brace is the inline definition of a new object.

Instead of defining the style object inline, we could also define an object in our code that stores the style properties.

render() {
  const styles = {
    color: 'blue'
  }

  return (
      <p style={styles}>
        Example Text
      </p>
  );
}

Conditionally applying inline styles

When using inline styles, we might also want to apply or remove styles based on the state of the component. We can easily add conditional styles using the ternary operator.

class App extends Component {
  constructor() {
    super()
    this.state = { isRed: true }
  }

  render() {
    const isRed = this.state.isRed

    return <p style={{ color: isRed ? 'red' : 'blue' }}>Example Text</p>
  }
}

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.

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>

}

camelCased Property Names

Since the inline CSS is written in a JavaScript object, properties with two names, like background-color, must be written with camel case syntax:

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

Use backgroundColor instead of background-color

Conclusion

I hope, this blog is helpful in understanding the basics of Inline CSS with React components and can serve as a roadmap for your journey.

Thank you for reading this blog.