我正在尝试在我的应用程序中使用 MDC 组件作为材料设计组件。我在 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:
In the dist
文件夹中有 css 文件mdc.tabs.css
其中包含组件的所有 css。我进行了测试,将所有文件内容复制到样式标签中,并且它正确应用了所有样式,但我认为这应该是更好的方法......我的问题是如何将 css 文件导入到我的 web 组件中?
当您render()
你的html:
<link href="./mdc.tabs.css" rel="stylesheet">
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)