将两个scss模块深度合并在一起

Question

我在一个React组件中有一个scss模块，而我正在传递另一个。我想将两者结合在一起，但不能完全覆盖另一个。

我已经尝试将两者简单地传播到一个新对象中，但这还不够深入。我也尝试过https://www.npmjs.com/package/deepmerge。但是那也不是我想要的。

示例：

    import myComponentStyles from './myComponent.module.scss';

    const MyComponent = ({ style = myComponentStyles }) => {
      const combined = { ...myComponentStyles, ...style };
   }

因此，当我渲染组件时，我会传入一个新的样式表

<MyComponent style={newStyles} />

所以在两个模块中我都有这样的风格。

myComponentStyles

.item {
  color: white;
  max-width: 100%;
  letter-spacing: 1px;
  font-size: 12px;
}

然后传递我的newStyles以进行合并。

.item {
  color: blue;
}

这里的问题是所有这些都从myComponentStyles基本模块中删除了。

  max-width: 100%;
  letter-spacing: 3.6px;
  font-size: 24px;

如何在不完全擦除基本样式的情况下进行合并？