[英]how to import a css file from an npm module - webcomponent
I'm trying to use MDC Components for material design components on my application. 我正在尝试将MDC组件用于我的应用程序中的材料设计组件。 I have a custom element in Polymer (LitElement): 我在Polymer(LitElement)中有一个自定义元素:
_render(props) {
return html`
${SharedStyles}
<style>
.js-panel {
display: none;
}
.js-panel.is-active {
display: block;
}
</style>
<div class="mdc-toolbar">
<div class="mdc-toolbar__row">
<div class="mdc-toolbar__section mdc-toolbar__section--align-start">
<nav id="tab1" class="mdc-tab-bar mdc-tab-bar--indicator-accent js-tabs" role="tablist">
<a role="tab" aria-controls="panel-1" class="mdc-tab mdc-tab--active">Item One</a>
<a role="tab" aria-controls="panel-2" class="mdc-tab">Item Two</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
</div>
</div>
</div>
<section>
<div class="js-panels" for='tab1'>
<p class="js-panel is-active" role="tabpanel" aria-hidden="false">Item One</p>
<p class="js-panel" role="tabpanel" aria-hidden="true">Item Two</p>
</div>
</section>
`
}
I have imported from @material/tabs all the classes needs to create the component, and it actually works perfectly fine but the styles doesn't apply: 我已经从@ material / tabs导入了创建组件所需的所有类,它实际上工作得很好,但是样式不适用:
In the dist
folder we have the css file mdc.tabs.css
that has all the css for the component. 在dist
文件夹中,我们具有css文件mdc.tabs.css
,其中包含该组件的所有css。 I did the test copying all the file content into the style tag and it applies all the styles correctly, but I think it should be a better way to do that... My question is how can I import the css file into my webcomponent? 我进行了将所有文件内容复制到样式标签中的测试,并且它正确地应用了所有样式,但是我认为这应该是一种更好的方法...我的问题是如何将css文件导入到我的webcomponent中?
当您render()
html时,您始终可以使用传统方法:
<link href="./mdc.tabs.css" rel="stylesheet">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.