带有“[]”等特殊符号的 Scss 类名

Question

这是一个奇怪的问题。我从可能 return“[TCP]”或“[UDP]”的服务器请求 link 类型。我想直接使用字符串作为类名来获得不同的背景颜色。我想要的是：

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

但是 css 选择器“.[TCP]”是不允许的，出现以下错误：

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

现在我正在使用 .replace(/\[|\]/g,"") 拆分字符串“[TCP]” --> “TCP”。但我希望有人能告诉我另一种方法，否则不可能。

Answer 1

“您可以使用 [TCP] 作为类名。”

如所写here (demo) 你可以使用除 NULL 之外的任何字符作为类名。您所要做的就是在 CSS 中的特殊字符前写上 \ 。在你的情况下，它看起来像这样 .\[TCP\].

但我相信只删除特殊字符会容易得多。