¿Cómo combinar múltiples objetos de estilo en línea?

En React puede crear claramente un objeto y asignarlo como un estilo en línea. es decir. mencionado abajo.

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

¿Cómo puedo combinar varios objetos y asignarlos juntos?

Si está usando React Native, puede usar la notación de matriz:

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

Mira mi publicación de blog detallada sobre esto.

Puede usar el operador de propagación:

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

Puedes hacer esto con Object.assign().

En su ejemplo, haría:

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

Eso fusionará los dos estilos. El segundo estilo reemplazará al primero si hay propiedades coincidentes.

Como señaló Brandon, debe usarlo Object.assign({}, divStyle, divStyle2)si desea reutilizarlo divStylesin aplicar fontSize.

Me gusta usar esto para hacer componentes con propiedades predeterminadas. Por ejemplo, aquí hay un pequeño componente sin estado con un valor predeterminado margin-right:

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

Entonces podemos renderizar algo como esto:

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

Lo que nos dará el resultado:

<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 diferencia de React Native, no podemos pasar una variedad de estilos en React, como

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

En React, necesitamos crear el único objeto de estilos antes de pasarlo a la propiedad de estilo. Me gusta:

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

  let enhancedStyle = {
    fontSize: '38px'
  }

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

Hemos utilizado el operador ES6 Spread para combinar dos estilos. También puede usar Object.assign () para el mismo propósito.

Esto también funciona si no necesita almacenar su estilo en una variable

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

Object.assign()es una solución fácil, pero el uso (actualmente) de la respuesta principal de la misma, aunque es ideal para hacer componentes sin estado, causará problemas para el objetivo deseado del OP de fusionar dos stateobjetos.

Con dos argumentos, en Object.assign()realidad mutará el primer objeto en el lugar, afectando futuras instancias.

Ex:

Considere dos posibles configuraciones de estilo para un cuadro:

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

Por lo tanto, queremos que todas nuestras cajas tengan estilos de 'caja' predeterminados, pero queremos sobrescribir algunas con un color diferente:

// 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 vez que se Object.assign()ejecuta, el objeto 'styles.box' cambia para siempre.

La solución es pasar un objeto vacío a Object.assign(). Al hacerlo, le está diciendo al método que produzca un NUEVO objeto con los objetos que le pasa. Al igual que:

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

Esta noción de objetos que mutan en el lugar es crítica para React, y el uso adecuado de esto Object.assign()es realmente útil para usar bibliotecas como Redux.

Array notaion es la mejor manera de combinar estilos en react native.

Esto muestra cómo combinar 2 objetos de estilo,

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

esto muestra cómo combinar el objeto y la propiedad Style,

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

Esto funcionará en cualquier aplicación nativa de reacción.

También puede combinar clases con un estilo en línea como este:

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

En realidad, hay una forma formal de combinar y es como a continuación:

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

Pero, hay un pequeño problema , si uno de ellos es pasado por el componente padre y fue creado por una forma formal combinada, tenemos un gran problema:

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

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

Y esta última línea hace que tenga un error de interfaz de usuario, hosco, React Native no puede lidiar con una matriz profunda dentro de una matriz. Entonces creo mi función auxiliar:

import { StyleSheet } from 'react-native';

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

Al usar my en styleJoinercualquier lugar, puede combinar cualquier tipo de estilo y combinar estilos. incluso undefinedu otros tipos inútiles no hacen que se rompa el estilo.

Descubrí que esto funciona mejor para mí. Se anula como se esperaba.

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

Para aquellos que buscan esta solución en React, si desea usar el operador spread dentro del estilo, debe usar: babel-plugin-transform-object-rest-spread.

Instálelo mediante el módulo npm y configure su .babelrc como tal:

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

Entonces puedes usar como ...

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

Más información: https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread/

Para llevar esto aún más lejos, puede crear una función auxiliar similar a los nombres de clase :

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

Y luego úselo condicionalmente en sus componentes:

<div style={

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

}>Hello World!</div>

Así que básicamente estoy viendo esto de manera incorrecta. Por lo que veo, esta no es una pregunta específica de React, más una pregunta de JavaScript sobre cómo combino dos objetos de JavaScript juntos (sin alterar propiedades con nombres similares).

En esta respuesta de StackOverflow, lo explica. ¿Cómo puedo fusionar propiedades de dos objetos JavaScript dinámicamente?

En jQuery puedo usar el método extend.

Para ampliar lo que dijo @PythonIsGreat, creo una función global que lo hará por mí:

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

Esto extiende profundamente los objetos a un nuevo objeto y permite un número variable de objetos como parámetros. Esto le permite hacer algo como esto:

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

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

He creado un módulo para esto si desea agregar estilos basados ​​en una condición como esta:

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

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

Formas de estilo en línea:

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