spread演算子を使うときに {} と {foo:undefined} は挙動が異なる

const obj1 = {
  foo: 42,
  ...({ foo: undefined }),
}; // {foo: undefined}


const obj2 = {
  foo: 42,
  ...({}),
}; // {foo: 42}

↑こんな感じで、undefinedが指定されているときとプロパティ自体がないときでは動作が異なります。

(実は上のコードはそのままだとfooが二重で定義されているとTSに怒られるので、実際に問題になるケースは少ないです)

問題になるケース

const props: {style: CSSProperties} = {
  style: {
    background: cond ? 'blue' : undefined,
  },
};
const style = {
  background: 'red',
  ...props.style,
};

このとき、condがfalseだとbackgroundは'red'ではなくundefinedになってしまいます。

これを解消するために、condがfalseのときにbackgroundを追加しないようにします。

const props = {
  style: {
    ...(cond && {background: 'blue'}),
  },
};
const style = {
  background: 'red',
  ...props.style,
};

これであれば意図した通りに動きます。