css - 带计数器的列表内容条件样式组件

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 && "° "}';