Search code examples
cssreactjsstyled-components

Styled components conditional for list content with counter

I'm trying to style an ordered list with styled components in React.

I've got the following code

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;
   }
`

I'm getting an error message for at the second counter Parsing error: Unexpected token, expected "}"

How can I wrap both conditions in a way that counter will be recognized?

Solution

  • Two points here:

    • counter is a css function, you cannot use it in the js function
    • content value must be within quotes

    Therefore change the line

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

    to

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