feat(mergeProps): enhance mergeProps to handle className and style

src/mergeProps.ts

@@ -1,6 +1,11 @@
 /**
  * Merges multiple props objects into one. Unlike `Object.assign()` or `{ ...a, ...b }`, it skips
  * properties whose value is explicitly set to `undefined`.
+ *
+ * @example
+ * ```ts
+ * const { a, b } = mergeProps(defaults, config, props);
+ * ```
  */
 function mergeProps<A, B>(a: A, b: B): B & A;
 function mergeProps<A, B, C>(a: A, b: B, c: C): C & B & A;
@@ -11,7 +16,13 @@ function mergeProps(...items: any[]) {
     if (item) {
       for (const key of Object.keys(item)) {
         if (item[key] !== undefined) {
-          ret[key] = item[key];
+          if (key === 'className') {
+            ret[key] = ret[key] ? `${ret[key]} ${item[key]}` : item[key];
+          } else if (key === 'style') {
+            ret[key] = { ...ret[key], ...item[key] };
+          } else {
+            ret[key] = item[key];
+          }
         }
       }
     }

tests/mergeProps.test.ts

@@ -7,6 +7,20 @@ describe('mergeProps', () => {
     expect(mergeProps(a, b)).toEqual({ foo: 1, bar: 3, baz: 4 });
   });
 
+  it('merges className', () => {
+    const a = { className: 'a' };
+    const b = { className: 'b' };
+    expect(mergeProps(a, b)).toEqual({ className: 'a b' });
+  });
+
+  it('merges style', () => {
+    const a = { style: { color: 'red' } };
+    const b = { style: { backgroundColor: 'blue' } };
+    expect(mergeProps(a, b)).toEqual({
+      style: { color: 'red', backgroundColor: 'blue' },
+    });
+  });
+
   it('excludes keys with undefined values', () => {
     const a = { foo: 1, bar: undefined };
     const b = { bar: 2 };