如何合并多个内联样式对象？

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

这将合并两种样式。如果有匹配的属性，则第二种样式将替换第一种样式。

正如Brandon所指出的，Object.assign({}, divStyle, divStyle2)如果要在divStyle未应用fontSize的情况下重用它，则应使用。

我喜欢用它来制作具有默认属性的组件。例如，这是一个带有默认值的无状态组件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中，我们需要先创建样式的单个对象，然后再将其传递给style属性。喜欢：

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

  let enhancedStyle = {
    fontSize: '38px'
  }

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

我们使用ES6 Spread运算符来组合两种样式。您也可以出于相同的目的使用Object.assign（）。

如果您不需要将样式存储在var中，这也可以使用

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

Object.assign()这是一个简单的解决方案，但是（当前）最高答案的用法—尽管可以很好地制造无状态组件，但会给OP合并两个state对象的预期目标带来麻烦。

具有两个参数，Object.assign()实际上将原地改变第一个对象，从而影响将来的实例化。

例如：

考虑一个盒子的两个可能的样式配置：

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

因此，我们希望所有框都具有默认的“框”样式，但要覆盖一些其他颜色的框：

// 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()。这样，您要告诉该方法使用传递的对象来生成一个NEW对象。像这样：

// 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之类的库。

数组概念是在React Native中组合样式的最佳方法。

这显示了如何组合2个Style对象，

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

这说明了如何结合样式对象和属性，

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

这将适用于任何React本机应用程序。

您还可以将类与内联样式结合在一起，如下所示：

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

最后一行导致出现UI错误，当然，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-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>

所以基本上我以错误的方式看待这个问题。从我的角度来看，这不是一个特定于React的问题，更多的是JavaScript问题，如何将两个JavaScript对象组合在一起（不破坏相似名称的属性）。

在这个StackOverflow答案中进行了解释。 如何动态合并两个JavaScript对象的属性？

在jQuery中，我可以使用extend方法。

为了扩展@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>