如何解决精致的全球风格
我正在使用lit-element(Typescript)开发Web组件,并且想要创建一些CSS文件来为我的Web组件包定义一个“全局主题”。
我在磁盘上的结构是这样的:
?src
┣?css
┃?color.css.ts
┃?size.css.ts
┣button.css.ts
┣WCButton.ts
┗?WcTheme.ts
让我解释一下:
import { css } from "lit-element";
export const defaultColor = css`
.primary{
background: #356e3b;
}
.secondary{
background: #5b8e48;
}
.terciary{
background: #302e2b;
}
`;
(color.css.ts代码)
import { defaultSize } from './css/size.css';
import { defaultColor } from './css/color.css';
import { LitElement } from 'lit-element';
export class WcTheme extends LitElement {
static styles = [defaultColor,defaultSize];
}
- button.css.ts是具体组件的CSS规则(在本例中为按钮)
import { css } from "lit-element";
export const buttonStyles = css`
.btn-default {
border: 1px solid lime;
}
- WcButton.ts是Web组件(按钮)的代码定义
import { LitElement,html } from 'lit-element';
import { WcTheme } from './WcTheme';
import { buttonStyles } from "./button.css";
export class WcButton extends LitElement {
static get styles() {
return [WcTheme.getStyles(),buttonStyles];
}
public render() {
return html`
<button
type="button"
class="btn-default"
>
<span class="primary h1">Test</span>
</button>
`;
}
}
[tsc] src/WCButton.ts(6,14): error TS2417: Class static side 'typeof WcButton' incorrectly extends base class static side 'typeof LitElement'.
[tsc] Types of property 'styles' are incompatible.
[tsc] Type '(CSSResult | CSsstyleSheet | CSSResultArray | undefined)[]' is not assignable to type 'CSSResult | CSsstyleSheet | CSSResultArray | undefined'.
[tsc] Type '(CSSResult | CSsstyleSheet | CSSResultArray | undefined)[]' is not assignable to type 'CSSResultArray'.
[tsc] The types returned by 'concat(...)' are incompatible between these types.
[tsc] Type '(CSSResult | CSsstyleSheet | CSSResultArray | undefined)[]' is not assignable to type '(CSSResult | CSsstyleSheet | CSSResultArray)[]'.
[tsc] Type 'CSSResult | CSsstyleSheet | CSSResultArray | undefined' is not assignable to type 'CSSResult | CSsstyleSheet | CSSResultArray'.
[tsc] Type 'undefined' is not assignable to type 'CSSResult | CSsstyleSheet | CSSResultArray'.
[tsc]
[tsc] 22:12:09 - Found 1 error. Watching for file changes.
因为我可以集成WcTheme.ts创建的CSSResultArray和button.css.ts中创建的CSSResult。
谢谢。
解决方法
我已经使用相同的文件结构解决了这个问题,并且在WcButton.ts中,我进行了更改:
static get styles() {
return [WcTheme.getStyles(),buttonStyles]; }
到
static get styles() {
return [...WcTheme.styles,buttonStyles]; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。