Stenciljs:动态加载styleUrl
Stenciljs:动态加载styleUrl
提问于 2018-09-26 22:59:27
我正在用stenciljs构建一个web组件，我希望能够加载css主题文件，基于名为主题的属性。
@Component({
tag: 'pm-header',
styleUrl: 'pm-header.scss',
shadow: true
})
export class PmHeader {
@Prop() theme: string = 'default';
...
render() {
return (<nav class={this.theme}></nav>)
}
}回答 2
Stack Overflow用户
发布于 2019-03-06 18:02:04
请看下面的例子。即使shadow设置为true，它也会正常工作
@Component({
tag: 'my-component',
styleUrls: [
'my-component.scss'
],
shadow: true
})
export class MyComponent{
@State() theme: string // when theme changes render needs to be called again
render () {
return (
<div>
{
this.theme &&
<link rel="stylesheet" href={`path_to_css/${this.theme}.css`} />
}
<p>{this.text}</p>
</div>
)
}
}Stack Overflow用户
发布于 2018-09-27 06:47:56
在这种情况下，您的组件将始终加载pm-header.scss中的样式。
要自定义基于主题的样式，我认为您有两个选择：
1-将所有主题放在pm-header.scss中，并使用Sass来保护每个主题：
nav.foo {
// foo theme goes in here
}
nav.bar {
// bar theme goes in here
}2-模板确实提供了一个styleUrls道具，表面上可以让你在加载时在多个Sass文件之间选择。这是IONIC4正在采取的方法(在ios和material designs之间；here's an example)，但我不认为它在如何实现上有很好的文档记录。您可能必须深入研究离子代码才能走这条路。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52520779
复制相关文章
相似问题