为什么变量不能与 Lit 的 `css` 模板文字函数正常工作？

Question

我正在尝试像这样抽象出我的 Web 组件主题：

import { css } from 'lit';

const theme = {
  primary: '#fff'
}

export const baseCss = css`
  :host {
    --primary: ${theme.primary}
  }
`

但是，至少在 TypeScript 中，这是行不通的，这是我收到的错误消息：

Argument of type 'string' is not assignable to parameter of type 'number | CSSResultGroup'.

为什么 Lit 会暴露一个模板标签字面函数，只是为了让它无法接收变量插值？

是因为代码注入吗？因为

unsafeCSS

似乎确实有效。

Answer 1

您需要使用

unsafeCSS

函数将字符串插入 CSS 样式表中。顾名思义，请确保仅传递受信任的字符串，例如您在代码中声明的常量。

import { unsafeCSS } from "lit";

// ...

export const baseCss = css`
  :host {
    --primary: ${unsafeCSS(theme.primary)}
  }
`;

有关更多详细信息，请参阅有关 在静态样式中使用表达式 的 Lit 文档。