Как расширить и переопределить объект стиля реагировать - PullRequest
Новая
       10

Как расширить и переопределить объект стиля реагировать

2 голосов
/ 03 октября 2019

У меня есть объект базового стиля, аналогичный приведенному ниже: 

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

Iпопытался расширить базовый стиль, используя синтаксис распространения, как показано ниже, но он переопределяет свойство gridStyle объекта baseGridStyle с extendedGridStyle 

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, класс A в базовой сетке переопределяетсяс классом extendedGridStyle. Есть ли способ сохранить ширину границы при одновременном переопределении fontSize.

1 Ответ

2 голосов
/ 03 октября 2019

Итак, если вы намерены объединить их, не теряя первоначальный ключ, то вы ищете: 

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

Надеюсь, это поможет

...