How To Combine Multiple Inline Style Objects In React?

If you don’t know how to combine multiple inline style objects in React, don’t worry. Learn more about it with the explanation and examples below.

Four ways of writing styles for React Components.

There are four different ways to style React Components, including personal preference and applicability magazine-type tooling.

1. CSS Stylesheet

You will import the CSS file into the component.

Code:

import './index.css'

Now you can split the CSS file for each component.

However, even if you only import one component, the Developer will also apply the imported CSS to the entire application.

2. Inline styling

In contrast to standard HTML, inline styles in React are not written as strings. Instead, it will be written as an object with a camelCased key and typically a style of string for the value.

Code:

<div style={{backgroundColor: 'red', color: 'blue'}}>Welcome to LearnShareIT</div>

3. CSS Modules

A CSS Module is a CSS file in which all class names and effect names are wrapped and available only in imported files.

4. Styled-components

Styled-components is a React and React Native library that lets you write styles at the application component level.

Combine multiple inline style objects in React

Using Object.assign() method

Object.assign() assigns all properties of an object, array combined to become a single value.

Code:

import "./App.css";
 
function App() {
    var colorStyle = { color: "blue" };
    var fontStyle = { fontSize: "24px" };
  
    return (
        <div style={Object.assign(colorStyle, fontStyle)}>
          	Welcome to LearnShareIT
        </div>
    );
}
 
export default App;

Syntax:

Object.assign(target, ...sources)

Parameter:

• target: Target object
• sources: Source objects

We will use the above method to combine two inline style objects, text style and font style. Because the Object.assign() will copy all their properties and become a single one.

Using spread operator 

In Javascript, the spread operator uses the ellipsis ‘...‘ notation. They added the spread operator from the ES6 version (ES2015) and the rest parameter. These two types of operators are syntactically identical, using the same ‘...‘

Code:

import "./App.css";
 
function App() {
    var colorStyle = { color: "blue" };
    var fontStyle = { fontSize: "24px" };
  
    return (
        <div style={{ ...colorStyle, ...fontStyle }}>
          	Welcome to LearnShareIT
        </div>
    );
}
 
export default App;

In this way, we also use the spread operator to copy all properties of the two objects’ color and font styles. And when placed in the style section of the <div> tag, all attributes are applied to it.

Summary

To summarize, this article shows you two ways to combine multiple inline style objects in React. You can use the spread operator or use Object.assign() method to get the same result. Thanks for reading!

Maybe you are interested:

• Display an image from a URL / local path in React
• Export multiple components from a file in React.js
• Get the Width of an Element in React

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs