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

我试图使用如下所示的扩展语法来扩展基本样式，但是它用ExtendedGridStyle覆盖了baseGridStyle对象的gridStyle属性

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

我尝试使用lodash的merge函数合并两个对象。由于extendedGridStyle是一个函数，因此合并函数不会合并样式。有没有办法做到这一点（可能类似于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'
    }
  }
})

我想这是您要寻找的。

编辑：因此，我了解到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'
    }
  })
})

希望有帮助

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

1 个答案: