在 React 中组合多个内联样式对象

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

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

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

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

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

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

在组合样式对象后,我们还可以内联添加键值对。

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

考虑扩展语法 … 的一种简单方法是,我们将对象的键值对解包到一个新对象中。

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

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

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

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

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

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

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

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

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 应用程序中更常用。