[英]Style host element on Stencil component based on class
在 Stencil 中设置shadow: true
后,宿主元素的样式如下
:host {
color: red;
}
这行得通。 但现在我有以下组件
@Component({
tag: 'my-component',
styleUrl: 'my-component.scss',
shadow: true
})
export class MyComponent {
@Element() host: HTMLElement;
render() {
this.host.classList.add('is-test');
return <div>Test</div>;
}
}
我在其中将is-test
类添加到宿主元素。 现在,要根据该类应用样式,我添加了以下内容
:host {
color: red;
&.is-test {
background-color: green;
}
}
我在my-component
元素上看到is-test
类,但未应用background-color: green
样式。 我一定是在这里做错了什么,任何帮助将不胜感激!
您可以使用:host()
:
:host {
color: red;
}
:host(.is-test) {
background-color: green;
}
顺便说一句:如果你想在宿主元素上设置类(或任何属性),你可以使用<Host>
功能组件:
import { Host } from '@stencil/core';
// ...
render() {
return <Host class="is-test"><div>Test</div></Host>;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.