Come combinare più oggetti di stile in linea?

In React puoi creare chiaramente un oggetto e assegnarlo come stile inline. cioè. menzionato sotto.

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

Come posso combinare più oggetti e assegnarli insieme?

Se stai usando React Native, puoi usare la notazione dell'array:

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

Controlla il mio post dettagliato sul blog su questo.

Puoi utilizzare l'operatore spread:

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

Puoi farlo con Object.assign().

Nel tuo esempio, faresti:

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

Ciò unirà i due stili. Il secondo stile sostituirà il primo se sono presenti proprietà corrispondenti.

Come ha notato Brandon, dovresti usare Object.assign({}, divStyle, divStyle2)se vuoi riutilizzare divStylesenza il fontSize applicato ad esso.

Mi piace usarlo per creare componenti con proprietà predefinite. Ad esempio, ecco un piccolo componente senza stato con un valore predefinito margin-right:

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

Quindi possiamo rendere qualcosa di simile a questo:

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

Che ci darà il risultato:

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

A differenza di React Native, non possiamo passare array di stili in React, come

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

In React, dobbiamo creare il singolo oggetto di styles prima di passarlo alla proprietà style. Piace:

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

  let enhancedStyle = {
    fontSize: '38px'
  }

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

Abbiamo utilizzato l' operatore Spread ES6 per combinare due stili. Puoi anche usare Object.assign () per lo stesso scopo.

Funziona anche se non hai bisogno di memorizzare il tuo stile in una variabile

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

Object.assign()è una soluzione facile, ma il suo utilizzo (attualmente) migliore della risposta - anche se va bene per creare componenti senza stato, causerà problemi per l'obiettivo desiderato dell'OP di unire due stateoggetti.

Con due argomenti, Object.assign()muterà effettivamente il primo oggetto sul posto, influenzando le istanze future.

Ex:

Considera due possibili configurazioni di stile per una scatola:

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

Quindi vogliamo che tutte le nostre scatole abbiano stili 'box' predefiniti, ma vogliamo sovrascriverne alcune con un colore diverso:

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

Una volta Object.assign()eseguito, l'oggetto "styles.box" viene cambiato per sempre.

La soluzione è passare un oggetto vuoto a Object.assign(). In tal modo, stai dicendo al metodo di produrre un NUOVO oggetto con gli oggetti che gli passi. Così:

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

Questa nozione di oggetti che mutano sul posto è fondamentale per React e un uso corretto di Object.assign()è davvero utile per usare librerie come Redux.

La notaion di array è il modo migliore per combinare gli stili in React Native.

Questo mostra come combinare 2 oggetti Style,

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

mostra come combinare l'oggetto Style e la proprietà,

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

Questo funzionerà su qualsiasi applicazione nativa di reazione.

In realtà, esiste un modo formale per combinare ed è come di seguito:

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

Ma c'è un piccolo problema , se uno di loro viene passato dal componente genitore ed è stato creato in modo formale combinato, abbiamo un grosso problema:

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

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

E quest'ultima riga causa un bug dell'interfaccia utente, scontroso, React Native non può gestire un array profondo all'interno di un array. Quindi creo la mia funzione di supporto:

import { StyleSheet } from 'react-native';

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

Usando my styleJoinerovunque puoi combinare qualsiasi tipo di stile e combinare stili. anche undefinedo altri tipi inutili non causano la rottura dello styling.

Puoi anche combinare classi con stili in linea come questo:

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

Ho scoperto che funziona meglio per me. Esegue l'override come previsto.

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

Per quelli che cercano questa soluzione in React, se vuoi usare l'operatore spread all'interno di style, dovresti usare: babel-plugin-transform-object-rest-spread.

Installalo dal modulo npm e configura il tuo .babelrc come tale:

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

Quindi puoi usare come ...

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

Maggiori informazioni: https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread/

Per andare oltre, potresti creare una funzione di aiuto simile a nomi di classi:

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

E poi usalo in modo condizionale nei tuoi componenti:

<div style={

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

}>Hello World!</div>

    const style1 = {
        backgroundColor: "#2196F3", 
    }
    
    const style2 = {
        color: "white", 
    }

    const someComponent = () => {
        return <div style={{ ...style1, ...style2 }}>This has 2 separate styles</div> 
    }
    

Notare le doppie parentesi graffe. L'operatore di diffusione è tuo amico.

Quindi fondamentalmente lo sto guardando nel modo sbagliato. Da quello che vedo, questa non è una domanda specifica di React, più di una domanda JavaScript su come combinare due oggetti JavaScript insieme (senza distruggere proprietà con nomi simili).

In questa risposta StackOverflow lo spiega. Come posso unire dinamicamente le proprietà di due oggetti JavaScript?

In jQuery posso usare il metodo di estensione.

Modi di styling in linea:

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

Per espandere ciò che ha detto @PythonIsGreat, creo una funzione globale che lo farà per me:

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

Questo estende profondamente gli oggetti in un nuovo oggetto e consente un numero variabile di oggetti come parametri. Questo ti permette di fare qualcosa del genere:

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

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

Ho creato un modulo per questo se vuoi aggiungere stili basati su una condizione come questa:

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

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

È necessario unire le proprietà in object. Per esempio,

const boxStyle = {
  width : "50px",
  height : "50px"
};
const redBackground = {
  ...boxStyle,
  background: "red",
};
const blueBackground = {
  ...boxStyle,
  background: "blue",
}




 <div style={redBackground}></div>
 <div style={blueBackground}></div>