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

【问题标题】：Scss classnames with special symbols like "[]"带有“[]”等特殊符号的 Scss 类名
【发布时间】：2022-02-07 14:36:50
【问题描述】：

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

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：