如何解决如何在 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`;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。