如何扩展和覆盖样式对象reactjs

Question

我有一个类似于下面的基本样式对象：

const baseGridStyle = {
  gridStyle: {
    '& .ag-header-row, .ag-filter-input:input': {
      fontSize: '14px',
      backgroundColor: COLORS.dark_blue,
      minWidth: '100%',
    }
  }
}

现在，我正在尝试扩展和覆盖上述样式对象，如下所示：

  const extendedGridStyle = (theme) => ({
  gridStyle: {
    '& .ag-header-row': {
      fontSize: '16px'
    }
  }
})

我尝试使用如下扩展语法扩展基本样式，但它用扩展的GridStyle 覆盖了baseGridStyle 对象的gridStyle 属性

const extendedGridStyle = (theme) => ({
  ...baseGridStyle,
  gridStyle: {
    '& .ag-header-row': {
      fontSize: '16px'
    }
  }
})

我尝试使用 lodash 的合并功能来合并两个对象。由于 extendedGridStyle 是一个函数，merge 函数不会合并样式。有没有办法做到这一点（可能是类似 jss 的方式）？

由于此问题，我无法继续进行。对此的任何帮助将不胜感激。提前致谢。干杯！

更新 1： 我尝试了 Stuart 下面建议的答案。会发生什么，如果我有一个

'& .ag-header-row' //class A
{
 fontSize: '14px,
 border-width: '1px'
}

在 baseGridStyle 中，我有一个

'& .ag-header-row' //class A
{
fontSize: '16px
}

在extendedGridStyle 中，基础网格中的A 类被extendedGridStyle 的A 类覆盖。有没有办法在只覆盖 fontSize 的同时保留边框宽度。

Answer 1

因此，如果您打算在不丢失原始密钥的情况下将它们合并在一起，那么您正在寻找的是：

const extendedGridStyle = (theme) => ({
  gridStyle: {
     ...baseGridStyle.gridStyle,
    '& .ag-header-row': {
      fontSize: '16px'
    }
  }
})

最终会变成这样：

const extendedGridStyle = (theme) => ({

  gridStyle: {
     '& .ag-header-row, .ag-filter-input:input': {
      fontSize: '14px',
      backgroundColor: COLORS.dark_blue,
      minWidth: '100%',
    },
    '& .ag-header-row': {
      fontSize: '16px'
    }
  }
})

我认为这就是你要找的。​​p>

编辑： 所以我的理解是 A 和 B 的类是相同的，你想将它们合并在一起。不丢失 cssProps。如果是这样，那么您可以使用类似的功能将它们深度合并

const merge = (target, source) => {
  // Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties
  for (const key of Object.keys(source)) {
    if (source[key] instanceof Object) Object.assign(source[key], merge(target[key], source[key]))
  }

  // Join `target` and modified `source`
  Object.assign(target || {}, source)
  return target
}

你会做以下事情：

const extendedGridStyle = (theme) => (merge(baseGridStyle,{

  gridStyle: {
    '& .ag-header-row': {
      fontSize: '16px'
    }
  })
})

希望对你有帮助