Як поєднувати кілька об’єктів стилю вбудованого стилю?

У React ви можете чітко створити об'єкт і призначити його як стиль вбудованого. тобто. згадані нижче.

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

var divStyle2 = {fontSize: '18px'};

React.render(<div style={divStyle}>Hello World!</div>, mountNode);

Як я можу поєднати кілька об'єктів та призначити їх разом?

Якщо ви використовуєте React Native, ви можете використовувати позначення масиву:

<View style={[styles.base, styles.background]} />

Ознайомтесь з моєю детальною публікацією в блозі про це.

Ви можете використовувати оператор спред:

 <button style={{...styles.panel.button,...styles.panel.backButton}}>Back</button

Ви можете це зробити за допомогою Object.assign().

У вашому прикладі ви зробите:

ReactDOM.render(
    <div style={Object.assign(divStyle, divStyle2)}>
        Hello World!
    </div>,
    mountNode
);

Це об'єднає два стилі. Другий стиль замінить перший, якщо є відповідні властивості.

Як зазначив Брендон, вам слід скористатися, Object.assign({}, divStyle, divStyle2)якщо ви хочете повторно використовувати їх divStyleбез застосованого до нього шрифту.

Мені подобається використовувати це для створення компонентів із властивостями за замовчуванням. Наприклад, ось невеликий компонент без стану з замовчуванням margin-right:

const DivWithDefaults = ({ style, children, ...otherProps }) =>
    <div style={Object.assign({ marginRight: "1.5em" }, style)} {...otherProps}>
        {children}
    </div>;

Тож ми можемо зробити щось подібне:

<DivWithDefaults>
    Some text.
</DivWithDefaults>
<DivWithDefaults className="someClass" style={{ width: "50%" }}>
    Some more text.
</DivWithDefaults>
<DivWithDefaults id="someID" style={{ marginRight: "10px", height: "20px"}}>
    Even more text.
</DivWithDefaults>

Що дасть нам результат:

<div style="margin-right:1.5em;">Some text.</div>
<div style="margin-right:1.5em;width50%;" class="someClass">Some more text.</div>
<div style="margin-right:10px;height:20px;" id="someID">Even more text.</div>

На відміну від React Native, ми не можемо передавати масив стилів у React, як

<View style={[style1, style2]} />

У React нам потрібно створити єдиний об’єкт стилів, перш ніж передати його до властивості стилю. Подібно до:

const Header = (props) => {
  let baseStyle = {
    color: 'red',
  }

  let enhancedStyle = {
    fontSize: '38px'
  }

  return(
    <h1 style={{...baseStyle, ...enhancedStyle}}>{props.title}</h1>
  );
}

Ми використовували оператор Spread ES6 для поєднання двох стилів. Ви також можете використовувати Object.assign () для тих же цілей.

Це також працює, якщо вам не потрібно зберігати свій стиль у варі

<Segment style={{...segmentStyle, ...{height:'100%'}}}>
    Your content
</Segment>

Object.assign()це просте рішення, але використання (на даний момент) основної відповіді на це - хоч і чудово для створення компонентів без громадянства, спричинить проблеми для бажаної мети ОП - об'єднання двох stateоб'єктів.

За допомогою двох аргументів Object.assign()фактично буде вимкнено перший об'єкт на місці, впливаючи на майбутні моменти.

Наприклад:

Розглянемо два можливих конфігурації стилю для поля:

var styles =  {
  box: {backgroundColor: 'yellow', height: '100px', width: '200px'},
  boxA: {backgroundColor: 'blue'},
};

Отже, ми хочемо, щоб усі наші поля мали стилі "box" за замовчуванням, але ми хочемо перезаписати деякі з іншого кольору:

// this will be yellow
<div style={styles.box}></div>

// this will be blue
<div style={Object.assign(styles.box, styles.boxA)}></div>

// this SHOULD be yellow, but it's blue.
<div style={styles.box}></div>

Після Object.assign()виконання об'єкт 'styles.box' змінюється назавжди.

Рішення - передати порожній об’єкт Object.assign(). Роблячи це, ви говорите про спосіб створення НОВОГО об'єкта з об'єктами, які ви передаєте йому. Так:

// this will be yellow
<div style={styles.box}></div>

// this will be blue
<div style={Object.assign({}, styles.box, styles.boxA)}></div>

// a beautiful yellow
<div style={styles.box}></div>

Це поняття об'єктів, що мутують на місці, є критичним для React, і правильне використання Object.assign()дуже корисне для використання таких бібліотек, як Redux.

Масив notaion - це найкращий спосіб поєднання стилів у реакції рідного.

Тут показано, як поєднувати 2 об'єкти стилю,

<Text style={[styles.base, styles.background]} >Test </Text>

це показує, як поєднувати об’єкт і властивість стилю,

<Text style={[styles.base, {color: 'red'}]} >Test </Text>

Це буде працювати над будь-яким природним додатком, що реагує.

Ви також можете комбінувати класи з вбудованим стилем так:

<View style={[className, {paddingTop: 25}]}>
  <Text>Some Text</Text>
</View>

Насправді існує формальний спосіб поєднання, і це як нижче:

<View style={[style01, style02]} />

Але є невелике питання , якщо один з них передається материнським компонентом, і він був створений комбінованим формальним способом, у нас є велика проблема:

// The passing style02 from props: [parentStyle01, parentStyle02]

// Now:
<View style={[style01, [parentStyle01, parentStyle02]]} />

І в цьому останньому рядку виникає помилка у користувальницькому інтерфейсі, похмура, React Native не може мати справу з глибоким масивом всередині масиву. Тому я створюю свою помічну функцію:

import { StyleSheet } from 'react-native';

const styleJoiner = (...arg) => StyleSheet.flatten(arg);

Використовуючи моє styleJoinerмісце, ви можете комбінувати будь-який тип стилю та комбінувати стилі. навіть undefinedчи інші непотрібні типи не спричиняють порушення стилізації.

Я виявив, що це найкраще працює для мене. Він перевищує очікуване.

return <View style={{...styles.local, ...styles.fromProps}} />

Для тих, хто шукає це рішення в React, Якщо ви хочете використовувати оператор розповсюдження всередині стилю, слід використовувати: babel-plugin-transform-object-rest-rest-spread.

Встановіть його за допомогою модуля npm та налаштуйте свій .babelrc як такий:

{
  "presets": ["env", "react"],
  "plugins": ["transform-object-rest-spread"]
}

Тоді ви можете використовувати як ...

const sizing = { width: 200, height: 200 }
 <div
   className="dragon-avatar-image-background"
   style={{ backgroundColor: blue, ...sizing }}
  />

Більше інформації: https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread/

Щоб зробити це ще більше, ви можете створити допоміжну функцію, схожу на назви класів :

const styleRules = (...rules) => {
  return rules.filter(Boolean).reduce((result, rule) => {
    return { ...result, ...rule };
  }, {});
};

А потім використовуйте його умовно у своїх компонентах:

<div style={

  styleRules(
    divStyle,
    (window.innerWidth >= 768) && divStyleMd,
    (window.innerWidth < 768) && divStyleSm
  )

}>Hello World!</div>

Тому я в основному дивлюся на це неправильно. З того, що я бачу, це не конкретно-реактивне питання, а більше питання JavaScript в тому, як я поєдную два об'єкти JavaScript разом (без клобірування аналогічно названих властивостей).

У цій відповіді StackOverflow це пояснюється. Як я можу динамічно об'єднати властивості двох об’єктів JavaScript?

У jQuery я можу використовувати метод розширення.

Щоб розгорнути те, що сказав @PythonIsGreat, я створюю глобальну функцію, яка зробить це для мене:

var css = function(){
    var args = $.merge([true, {}], Array.prototype.splice.call(arguments, 0));
    return $.extend.apply(null, args);
}

Це глибоко розширює об'єкти в новий об'єкт і дозволяє змінювати кількість об'єктів як параметри. Це дозволяє зробити щось подібне:

return(
<div style={css(styles.base, styles.first, styles.second,...)} ></div>
);

var styles = {
  base:{
    //whatever
  },
  first:{
    //whatever
  },
  second:{
    //whatever
  }
}

Я створив для цього модуль, якщо ви хочете додати стилі на основі такої умови:

multipleStyles(styles.icon, { [styles.iconRed]: true })

https://www.npmjs.com/package/react-native-multiple-styles

Способи стильної стилізації:

<View style={[styles.red, {fontSize: 25}]}>
  <Text>Hello World</Text>
</View>

<View style={[styles.red, styles.blue]}>
  <Text>Hello World</Text>
</View>

  <View style={{fontSize:10,marginTop:10}}>
  <Text>Hello World</Text>
</View>