Comment combiner plusieurs objets de style en ligne?

Dans React, vous pouvez clairement créer un objet et l'affecter en tant que style en ligne. c'est à dire. mentionné ci-dessous.

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);

Comment puis-je combiner plusieurs objets et les affecter ensemble?

Si vous utilisez React Native, vous pouvez utiliser la notation de tableau:

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

Consultez mon blog détaillé à ce sujet.

Vous pouvez utiliser l'opérateur d'étalement:

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

Vous pouvez le faire avec Object.assign().

Dans votre exemple, vous feriez:

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

Cela fusionnera les deux styles. Le deuxième style remplacera le premier s'il existe des propriétés correspondantes.

Comme l'a noté Brandon, vous devez l'utiliser Object.assign({}, divStyle, divStyle2)si vous souhaitez réutiliser divStylesans que la taille de police ne lui soit appliquée.

J'aime l'utiliser pour créer des composants avec des propriétés par défaut. Par exemple, voici un petit composant sans état avec une valeur par défaut margin-right:

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

Nous pouvons donc rendre quelque chose comme ceci:

<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>

Ce qui nous donnera le résultat:

<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>

Contrairement à React Native, nous ne pouvons pas transmettre un tableau de styles dans React, comme

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

Dans React, nous devons créer l'objet unique des styles avant de le passer à la propriété style. Comme:

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

  let enhancedStyle = {
    fontSize: '38px'
  }

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

Nous avons utilisé l' opérateur Spread ES6 pour combiner deux styles. Vous pouvez également utiliser Object.assign () dans le même but.

Cela fonctionne également si vous n'avez pas besoin de stocker votre style dans un var

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

Object.assign()est une solution facile, mais son utilisation (actuellement) la meilleure réponse - bien qu'elle soit très bien pour créer des composants sans état, causera des problèmes pour l'objectif souhaité de l'OP de fusionner deux stateobjets.

Avec deux arguments, Object.assign()va en fait muter le premier objet en place, affectant les instanciations futures.

Ex:

Considérez deux configurations de style possibles pour une boîte:

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

Nous voulons donc que toutes nos boîtes aient des styles de boîte par défaut, mais nous voulons en remplacer certaines avec une couleur différente:

// 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>

Une fois Object.assign()exécuté, l'objet 'styles.box' est définitivement changé.

La solution est de passer un objet vide à Object.assign(). Ce faisant, vous dites à la méthode de produire un nouvel objet avec les objets que vous lui avez transmis. Ainsi:

// 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>

Cette notion d'objets en mutation sur place est critique pour React, et une bonne utilisation de Object.assign()est vraiment utile pour utiliser des bibliothèques comme Redux.

Array notaion est le meilleur moyen de combiner des styles dans React Native.

Cela montre comment combiner 2 objets Style,

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

cela montre comment combiner objet et propriété Style,

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

Cela fonctionnera sur n'importe quelle application native React.

Vous pouvez également combiner des classes avec un style en ligne comme ceci:

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

En fait, il existe un moyen formel de combiner et c'est comme ci-dessous:

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

Mais, il y a un petit problème , si l'un d'eux est passé par le composant parent et qu'il a été créé par une manière formelle combinée, nous avons un gros problème:

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

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

Et cette dernière ligne a un bug d'interface, sûrement, React Native ne peut pas gérer un tableau profond à l'intérieur d'un tableau. Je crée donc ma fonction d'aide:

import { StyleSheet } from 'react-native';

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

En utilisant my styleJoinerpartout, vous pouvez combiner n'importe quel type de style et combiner des styles. même undefinedou d'autres types inutiles ne provoquent pas de rupture du style.

J'ai trouvé que cela fonctionnait le mieux pour moi. Il remplace comme prévu.

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

Pour ceux qui recherchent cette solution dans React, si vous souhaitez utiliser l'opérateur de propagation dans le style, vous devez utiliser: babel-plugin-transform-object-rest-spread.

Installez-le par le module npm et configurez votre .babelrc comme tel:

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

Ensuite, vous pouvez utiliser comme ...

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

Plus d'informations: https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread/

Pour aller encore plus loin, vous pouvez créer une fonction d'assistance semblable à des noms de classe :

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

Et puis utilisez-le conditionnellement dans vos composants:

<div style={

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

}>Hello World!</div>

Donc, fondamentalement, je regarde les choses dans le mauvais sens. D'après ce que je vois, ce n'est pas une question spécifique à React, plus une question JavaScript sur la façon de combiner deux objets JavaScript ensemble (sans encombrer des propriétés nommées de manière similaire).

Dans cette réponse StackOverflow, il l'explique. Comment fusionner dynamiquement les propriétés de deux objets JavaScript?

Dans jQuery, je peux utiliser la méthode extend.

Pour développer ce que @PythonIsGreat a dit, je crée une fonction globale qui le fera pour moi:

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

Cela étend profondément les objets dans un nouvel objet et permet un nombre variable d'objets comme paramètres. Cela vous permet de faire quelque chose comme ceci:

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

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

J'ai construit un module pour cela si vous souhaitez ajouter des styles basés sur une condition comme celle-ci:

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

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

Façons de style en ligne:

<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>