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

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

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 является функцией, функция слияния не объединяет стили. есть ли способ сделать это (вероятно, jss-подобный способ)?

Я не могу продолжить из-за этой проблемы. Любая помощь по этому поводу будет очень признательна. Заранее спасибо. Ваше здоровье!

Обновление 1: я попробовал ответ, предложенный ниже Стюартом. Что происходит, если у меня

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

в baseGridStyle и у меня есть

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

внутри extendedGridStyle класс A в базовой сетке заменяется классом A из extendedGridStyle. Есть ли способ сохранить ширину границы, переопределив только fontSize.


reactjs material-ui jss
person Sathiya Narayanan    schedule 03.10.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

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

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

person jstuartmilne    schedule 03.10.2019
comment
Спасибо за быстрый ответ. Я попробовал вышеуказанное решение. Что происходит, если у меня есть класс A {prop1: value1, prop2: value2} в baseGridStyle и у меня есть класс A {prop1: value3} внутри extendedGridStyle, класс A в базовой сетке переопределяется классом A из extendedGridStyle . Есть ли способ сохранить prop2, переопределив только prop1 - person Sathiya Narayanan; 03.10.2019
comment
когда вы говорите класс A, вы имеете в виду класс как в классе css или имеете в виду объект js? - person jstuartmilne; 03.10.2019
comment
Приносим извинения за возникшую путаницу. Я имею ввиду класс css. Рассмотрим '& .ag-header-row' вместо класса A - person Sathiya Narayanan; 04.10.2019