Como combinar vários objetos de estilo embutido?

No React, você pode criar claramente um objeto e atribuí-lo como um estilo embutido. ie mencionado abaixo.

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

Como posso combinar vários objetos e atribuí-los juntos?

Se você estiver usando o React Native, poderá usar a notação de matriz:

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

Confira meu post detalhado sobre isso.

Você pode usar o operador spread:

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

Você pode fazer isso com Object.assign().

No seu exemplo, você faria:

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

Isso mesclará os dois estilos. O segundo estilo substituirá o primeiro se houver propriedades correspondentes.

Como Brandon observou, você deve usar Object.assign({}, divStyle, divStyle2)se desejar reutilizar divStylesem o fontSize aplicado a ele.

Eu gosto de usar isso para criar componentes com propriedades padrão. Por exemplo, aqui está um pequeno componente sem estado com um padrão margin-right:

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

Então, podemos renderizar algo como isto:

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

O que nos dará o 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>

Ao contrário do React Native, não podemos passar uma variedade de estilos no React, como

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

No React, precisamos criar o único objeto de estilos antes de passá-lo para a propriedade style. Gostar:

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

  let enhancedStyle = {
    fontSize: '38px'
  }

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

Usamos o operador ES6 Spread para combinar dois estilos. Você também pode usar Object.assign () também para a mesma finalidade.

Isso também funciona se você não precisar armazenar seu estilo em um var

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

Object.assign()é uma solução fácil, mas o uso (atualmente) da principal resposta - embora seja bom para criar componentes sem estado, causará problemas para o objetivo desejado do OP de mesclar dois stateobjetos.

Com dois argumentos, Object.assign()na verdade, o primeiro objeto será modificado, afetando instanciações futuras.

Ex:

Considere duas configurações de estilo possíveis para uma caixa:

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

Portanto, queremos que todas as nossas caixas tenham estilos padrão de 'caixa', mas queremos substituir alguns com uma cor 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>

Uma vez Object.assign()executado, o objeto 'styles.box' é alterado para sempre.

A solução é passar um objeto vazio para Object.assign(). Ao fazer isso, você está dizendo ao método para produzir um novo objeto com os objetos que você o transmite. Igual a:

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

Essa noção de objetos com mutação no local é crítica para o React, e o uso adequado de Object.assign()é realmente útil para o uso de bibliotecas como o Redux.

A anotação de matriz é a melhor maneira de combinar estilos em reagir nativo.

Isso mostra como combinar 2 objetos de estilo,

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

isso mostra como combinar objeto e propriedade Style,

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

Isso funcionará em qualquer aplicativo nativo de reação.

Você também pode combinar classes com estilo embutido, como este:

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

Na verdade, existe uma maneira formal de combinar e é como abaixo:

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

Porém, há um pequeno problema : se um deles é passado pelo componente pai e foi criado de uma maneira formal combinada, temos um grande problema:

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

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

E essa última linha faz com que o bug da interface do usuário, certamente, o React Native não possa lidar com uma matriz profunda dentro de uma matriz. Então, eu crio minha função auxiliar:

import { StyleSheet } from 'react-native';

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

Ao usar o meu em styleJoinerqualquer lugar, você pode combinar qualquer tipo de estilo e estilos. mesmo undefinedou outros tipos inúteis não causam quebra no estilo.

Eu descobri que isso funciona melhor para mim. Ele substitui conforme o esperado.

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

Para aqueles que procuram esta solução no React, se quiser usar o operador de propagação dentro do estilo, use: babel-plugin-transform-object-rest-spread.

Instale-o pelo módulo npm e configure seu .babelrc da seguinte forma:

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

Então você pode usar como ...

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

Mais informações: https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread/

Para levar ainda mais longe, você pode criar uma função auxiliar semelhante a um nome de classe :

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

E use-o condicionalmente em seus componentes:

<div style={

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

}>Hello World!</div>

Então, basicamente, estou vendo isso da maneira errada. Pelo que vejo, essa não é uma pergunta específica do React, mais uma questão de JavaScript sobre como combinar dois objetos JavaScript (sem interferir nas propriedades com nomes semelhantes).

Nesta resposta StackOverflow, ela explica. Como mesclar propriedades de dois objetos JavaScript dinamicamente?

No jQuery eu posso usar o método extend.

Para expandir o que o @PythonIsGreat disse, crio uma função global que fará isso por mim:

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

Isso estende profundamente os objetos para um novo objeto e permite um número variável de objetos como parâmetros. Isso permite que você faça algo assim:

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

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

Eu construí um módulo para isso, se você deseja adicionar estilos com base em uma condição como esta:

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

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

Maneiras de estilizar em linha:

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