有没有一种方法可以告诉WebStorm，字符串是CSS？

Question

我可以帮您翻译。以下是中文翻译结果：

我有一些用TypeScript编写的React组件，其中包含一个字符串属性用于CSS类。例如：

定义

function MyComponent({css}:{css:string}) {
    // use css string...
}

使用方法

<MyComponent css="text-blue-100 flex flex-row"/>

有没有一种方法告诉WebStorm，css字段应该被解释为CSS而不是任意字符串，这样我就可以像在标准HTML标记中一样为该字段启用自动完成功能了？

- Mattia

---

尝试使用语言注入（设置/首选项 | 编辑器 | 语言注入）-- 这是处理 HTML 标签中的 style 属性的方法，例如。看看是否可以用于类的自动完成... 1) https://www.jetbrains.com/help/webstorm/using-language-injections.html#configure-injection-rules 2) https://www.jetbrains.com/help/webstorm/language-injections-settings.html - LazyOne

谢谢你的建议。那也是我首先查看的地方，但据我所知，这不是一个选项。它允许我在字符串中编写CSS（例如声明带有属性的类），但不能将字符串解释为一系列CSS类名。 - Mattia

Answer 1

这个方法相当hacky。。。但似乎是有效的。它的效果：很可能不如HTML标签中本身就有的class属性。

代码示例（纯HTML文件，如果这有任何区别）：

实际的注入规则。 思路是欺骗IDE，让它在这里认为这是一个class属性...所以我们注入了带有前缀和后缀的HTML：

- LazyOne

---

从我所看到的情况来看，效果还不错！谢谢！ - Mattia

Answer 2

很遗憾，我只能建议您将 JQuery-CSS 语言注入到您的属性中，没有其他解决方案。

但请注意，您需要输入一个点才能看到类的完成情况 - 在注入此语言后，类应以点开头，HTML标签则建议不要使用：

- lena

---

谢谢你澄清这个问题并提供解决方法。不幸的是，那个选项对我来说行不通，但希望它能帮到其他人。 - Mattia