在 React 中组合多个内联 Style 对象

Combine multiple inline Style objects in React

在 React 中使用 spread 语法组合多个内联样式对象，例如
style={{...style1, ...style2}}. 展开语法会将对象的键值对解压缩为最终对象，并将样式应用于元素。

应用程序.js


export default function App() {
  const style1 = {backgroundColor: 'salmon'};
  const style2 = {fontSize: '2rem'};

  return (
    <div>
      <div style={{...style1, ...style2}}>Some content here</div>
    </div>
  );
}

我们使用
扩展语法 (…)
在 React 中组合多个内联样式对象。

您可以根据需要合并尽可能多的内联样式对象。

应用程序.js


export default function App() {
  const style1 = {backgroundColor: 'salmon'};
  const style2 = {fontSize: '2rem'};
  const style3 = {color: 'white'};

  return (
    <div>
      <div style={{...style1, ...style2, ...style3}}>Some content here</div>
    </div>
  );
}

在组合样式对象后，您还可以内联添加键值对。

应用程序.js


export default function App() {
  const style1 = {backgroundColor: 'salmon'};
  const style2 = {fontSize: '2rem'};

  return (
    <div>
      <div style={{...style1, ...style2, color: 'white', padding: '2rem'}}>
        Some content here
      </div>
    </div>
  );
}

考虑传播语法 (…) 的一种简单方法是，我们将对象的键值对解包到一个新对象中。

style请注意，我们为prop使用了 2 组花括号。外面的花括号组标志着将要计算的表达式的开始。

内部的花括号组是包含样式和值的对象。

请务必注意，使用扩展语法组合样式对象的顺序很重要。

应用程序.js


export default function App() {
  const style1 = {backgroundColor: 'salmon'};
  const style2 = {fontSize: '2rem'};
  const style3 = {backgroundColor: 'blue'}; // 👈️ overrides style1

  return (
    <div>
      <div style={{...style1, ...style2, ...style3}}>Some content here</div>
    </div>
  );
}

请注意，对象style1和属性style3设置backgroundColor为不同的值。

如果两个对象具有相同的键，则其属性稍后解包的对象将获胜。

这两个对象都具有该backgroundColor属性，但是的键
style3稍后会被解包，因此它的值会覆盖中的
backgroundColor属性值style1。

您可能还会在网上看到使用
Object.assign
方法组合内联样式对象的示例。

应用程序.js


export default function App() {
  const style1 = {backgroundColor: 'salmon'};
  const style2 = {fontSize: '2rem'};

  return (
    <div>
      <div style={Object.assign({}, style1, style2, {color: 'white'})}>
        Some content here
      </div>
    </div>
  );
}

该Object.assign方法采用的第一个参数是对象——源对象的属性应用到的对象。 target

该方法采用的下一个参数是一个或多个源对象。

目标对象的属性将被参数顺序中具有相同属性的其他对象覆盖。

应用程序.js


export default function App() {
  const style1 = {backgroundColor: 'salmon'};
  const style2 = {fontSize: '2rem'};

  return (
    <div>
      <div style={Object.assign({}, style1, style2, {backgroundColor: 'lime'})}>
        Some content here
      </div>
    </div>
  );
}

此行为与传播语法 (…) 一致。

这两种方法中的任何一种都有效，但我会坚持使用扩展语法 (…)，因为我发现它更易于阅读并且在 React.js 应用程序中更常用。

–