Как объединить несколько объектов встроенного стиля?

Опубликовано: 7 Августа, 2021

Несколько встроенных стилей можно объединить двумя способами, оба из которых описаны ниже:

Метод 1. Использование оператора распространения: Оператор… называется оператором распространения. Оператор распространения в этом случае объединяет оба объекта в новый объект. Ниже представлена реализация объединения нескольких встроенных стилей с использованием оператора распространения.

Javascript

 import React from 'react' ;
 
const text= {
    color: 'green' ,
    fontSize: '50px'
 ,
    textAlign: 'center'
 }
 const background = {
    background: "#e0e0e0"
 }
 
export function default App(){
    return (
      <div style={{...text,...background}}>
         <h1>GeeksforGeeks</h1>
      </div>
    )
 }

Метод 2 - Использование Object.assign (): Ниже представлена реализация объединения нескольких встроенных стилей с использованием метода Object.assign (). В этом случае текстовый и фоновый объекты назначаются новому пустому объекту.

Javascript

 import React from "react" ;
 
const text= {
    color: 'green' ,
    fontSize: '50px'
 ,
    textAlign: 'center'
 }
 ;
 const background = {
    background: "#e0e0e0"
 };
 
export function default App() {
  return (
    <div style={Object.assign({}, text, background)}>
      <h1>GeeksforGeeks</h1>
    </div>
  );
 }

Вывод: в обоих методах, если два или более объекта имеют одно и то же свойство, тогда свойство объекта, присутствующего в крайнем правом углу, будет отражено в выводе.

Technical Scripter Picked

Как объединить несколько объектов встроенного стиля?

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ