如何扩展和覆盖样式对象 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'
    }
  }
})

我尝试使用如下扩展语法扩展基本样式，但它使用 extendedGridStyle

覆盖了 baseGridStyle 对象的 gridStyle 属性

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

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

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

更新 1：我尝试了斯图尔特在下面建议的答案。会发生什么，如果我有

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

在 baseGridStyle 中，我有一个

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

在 extendedGridStyle 中，基础网格中的 class A 被 extendedGridStyle 的 class 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

How to extend and override a style object reactjs

reactjs

material-ui

jss