Search code examples
csssasscss-modules

Scss classnames with special symbols like "[]"

This is a strange question. I request link type from server which might return "[TCP]" or "[UDP]". And I wanna use the string as classname directly for different background color like. What I want is :

<div className={`${styles.span} ${styles["[TCP]"]}`}/>

But the css selector ".[TCP]" is not allowed, below error given:

SassError: Invalid CSS after "&": expected selector, was ".[TCP]"

Now I am using .replace(/\[|\]/g,"") split the string "[TCP]" --> "TCP". But I hope someone can tell me another way or it's impossible.

Solution

  • "You can use [TCP] as classname."

    As written here (demo) you can use any character for classname except NULL. All you have to do is in CSS write \ before special characters. In your case, it would look like this .\[TCP\].

    But I believe it's much easier to just remove the special characters.