Свойство «содержимое» в селекторе псевдоэлементов неправильно проанализировано

#javascript #next.js #styling #pseudo-element #jss

Вопрос:

Ожидаемое поведение: я внедрил JSS в свой Next.js проект. Мне нужно использовать псевдо-селекторы/элементы, потому что я хочу установить соотношение сторон в своем div.

Опишите ошибку: Когда я пытаюсь использовать селектор псевдоэлементов, например»: до «или»: после», они анализируются неправильно, но только при первом рендеринге. После быстрого обновления/горячей перезагрузки все в порядке.

 gridItem: {
      position: 'relative',

      'amp;::before': {
        display: 'block',
        content: '""',
        paddingBottom: 'calc(5/4 * 100%)',
        width: '100%',
      },
    },
 

Анализируется как

 .gridItem-0-1-31::before {
  width: 100%;
  content: amp;quot;
  amp;quot: ;
  display: table;
  opacity: 0;
  padding-bottom: calc(5/4 * 100%);
}
 

Каким content -то образом собственность портится

 content: amp;quot;
amp;quot: ;
 

Я пытался amp;:before , amp;::before , content: '" "' , content: '"..."'

Версии:

  • реагировать-jss: 10.7.1
  • Браузер: Chrome, Safari
  • ОС: Macos