这个问题可以通过使用www.example.com样式文档中的技术来解决lit.dev。
您的示例会导致每个类评估一次样式。这是一种高性能解决方案。但是，您所描述的情况需要根据属性更改样式，该属性可以每个组件示例不同。
因此，以下选项可用：

在Lit模板中添加<style>元素

render() {
  return html`
    <style>
      :host {
        /* Warning: this approach has limitations & performance issues! */
        color: ${myColor}
      }
    </style>
    <div>template content</div>
  `;
}

注意：在元素中计算表达式效率很低。当元素中的任何文本发生更改时，浏览器必须重新解析整个元素，从而导致不必要的工作。
性能成本可以通过只应用<style>元素中更改的样式来降低。例如：

// Static styles that do not change between cases.
 static styles = css`/* ... */`;

 
  render() {
    const module1 = html`<style> :host { color: red; } </style>`;
    return html`${this.attribute ? module1 : module2}`

使用styleMap或classMap

使样式动态化的另一种方法是向模板中的class或style属性添加表达式，classMap和styleMap可用于根据条件（如this.attribute值）轻松应用类或样式。
阅读更多关于他们：https://lit.dev/docs/components/styles/#dynamic-classes-and-styles
这可能需要更改从css-module.js导入的内容。