Как импортировать файл CSS из модуля npm - вебкомпонент - PullRequest
Новая
       43

Как импортировать файл CSS из модуля npm - вебкомпонент

0 голосов
/ 25 мая 2018

Я пытаюсь использовать компоненты 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>
        `
    }

Я импортировал из @ material / tabs все классы, необходимые для создания компонента, и он на самом деле работает отлично, но стили не применяются: npm module

В папке dist есть файл css mdc.tabs.css, в котором есть все css для компонента.Я сделал тест, копируя все содержимое файла в тег style, и он правильно применяет все стили, но я думаю, что это должен быть лучший способ сделать это ... Мой вопрос: как мне импортировать файл css в мой веб-компонент?

1 Ответ

0 голосов
/ 05 января 2019

Вы всегда можете использовать традиционный подход, когда render() ваш html:

<link href="./mdc.tabs.css" rel="stylesheet">

...