如何在 lit-element css 样式属性中导入 CSS 框架？

问题描述

我目前正在为一个项目使用 lit-element 网络组件。我使用的 CSS 框架是 semantic-ui。我已将我的 css 样式分离到它们自己的文件中，以便在组件之间共享。我目前正在尝试在我的整个网络组件中共享semantic-css。由于阴影 dom 封装了 css 样式，因此选择器不会跨越阴影边界。这是我当前的实现，在我的 Web 组件中具有全局通用样式。对于

app-css.js

import { css } from "lit-element";

export default css` SEMANTIC CSS HERE`

app.js

import globalSemanticCSS from "../styles/css-utils/app-css";
class App extends LitElement {
  static get styles() {
    return [
      globalSemanticCSS,//does not work
      testCss,css`
        h1 {
          color: blue;
        }
      `,];
  }

我不明白为什么 csstext 属性是 undefined As you can see in the img the property is undefined

lit-element 文档说明并表明您可以做到这一点。

An array of tagged template literals.

static get styles() {
  return [ css`...`,css`...`];
}

我不确定我的 globalSemanticCSS 是否大到无法添加 css 属性？如果有人对我如何使用像语义这样的 CSS 框架在整个应用程序中进行全局共享有任何建议，我将很乐意接受帮助。谢谢~

解决方法

问题是'default' 导出。 您必须使用 const 变量。

通过以下方式更改您的代码：

import { css } from 'lit-element';

export const globalSemanticCSS = css` SEMANTIC CSS HERE`;