我正在尝试在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 "}"
收到一条错误消息
如何包装两个条件,以使计数器被识别?
答案 0 :(得分:2)
这里有两点:
counter
是一个CSS函数,您不能在js函数中使用它content
值必须在引号内因此请更改行
content: ${props => props.isDeg ? counter(secondItem) `° ` : `§ ` counter(secondItem)};
到
content: '${props => !props.isDeg && "§ "}' counter(secondItem) '${props => props.isDeg && "° "}';
答案 1 :(得分:0)
counter(secondItem)是一个函数调用,它返回一个值,然后您需要将其与°
相加?那你可能想试试
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;
margin: 10px 0 0 25px;
li:before {
content: ${props => props.isDeg ? `${counter(secondItem)}° ` : `§ ${counter(secondItem)}`};
counter-increment: secondItem;
}
`
让我知道这是否适合您:)