Почему не получается переопределить background-color

В зависимости от состояния, блок должен менять цвет. Все нечетные блоки имеют цвет $smoky-white, а блоки в состоянии open должны иметь цвет $platinum.

Проблема в то, что у &:nth-child(odd) блоков цвет в состоянии open не переопределяет цвет &:nth-child(odd), в DevTools браузера цвет от open зачеркнут, хотя специфичность у селектора класса и всевдокласса одинаковая. Подскажите, что я делаю не так?

JSX:

function ListRecord({ record, key }: IListRecordProps) {
  const [open, setOpen] = React.useState<boolean>(false);

  return (
    <div
      key={key}
      onClick={() => setOpen((value) => !value)}
      className={classNames(styles.record, open && styles.record_open)}
    >
      
    </div>
  );
}

SCSS:

    .record {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 15px;
      row-gap: 12px;
      border-radius: 6px;
      padding: 20px 16px;

      &:nth-child(odd) {
        background-color: $smoky-white;
      }

      &_open {
        background-color: $platinum;
      }  
    }