Стилизованные компоненты условно для содержимого списка со счетчиком

Question

Я пытаюсь оформить упорядоченный список со стилизованными компонентами в React.

У меня есть следующий код

const Sublist = styled.ol`
   counter-reset: secondItem;
   margin: 10px 0 0 25px;

   li:before {
       content: ${props => props.isDeg ? counter(secondItem) `° ` : `§ ` counter(secondItem)};
       counter-increment: secondItem;
   }
`

Я получаю сообщение об ошибке навторой счетчик Parsing error: Unexpected token, expected "}"

Как обернуть оба условия так, чтобы счетчик был распознан?

Answer 1

Здесь две точки:

• counter - это функция css, ее нельзя использовать в функции js
• content значение должно быть в кавычках

Поэтому измените строку

content: ${props => props.isDeg ? counter(secondItem) `° ` : `§ ` counter(secondItem)};

на

content: '${props => !props.isDeg && "§ "}' counter(secondItem) '${props => props.isDeg && "° "}';

Answer 2

Счетчик

(secondItem) - это вызов функции, который возвращает значение, а затем вам нужно сложить с ним °?Тогда вы можете попробовать

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var counter = (secondItem) => {
   return secondItem === 1 ? 'abc' : 'edf';
}
var backtickData = `${1 === 1 ? `${counter(1)} ° ` : `§ ${counter(1)}`}`;
console.log(backtickData)

const Sublist = styled.ol` counter-reset: secondItem;поле: 10px 0 0 25px;li: before {content: $ {props => props.isDeg?`$ {counter (secondItem)} °`: `§ $ {counter (secondItem)}`};приращение счетчика: secondItem;} `

Дайте мне знать, если это работает для вас:)