Stenciljs: динамически загружать styleUrl - PullRequest
Новая
       8

Stenciljs: динамически загружать styleUrl

0 голосов
/ 26 сентября 2018

Я создаю веб-компонент с помощью stenciljs и не могу загрузить файл темы css на основе свойства, называемого theme. 

@Component({
  tag: 'pm-header',
  styleUrl: 'pm-header.scss',
  shadow: true
})

export class PmHeader {

  @Prop() theme: string = 'default';

  ...

  render() {
    return (<nav class={this.theme}></nav>)
  }
}

Ответы [ 3 ]

0 голосов
/ 06 марта 2019

Пожалуйста, посмотрите на приведенный ниже пример.Это будет работать, даже если для тени установлено значение 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>
      )
    }
}
0 голосов
/ 10 июня 2019

Я знаю, что уже поздно, но, надеюсь, это должно помочь другим, так как это не задокументировано, и я просто потратил много времени на выяснение этого.Следующий код позволяет вашим пользовательским компонентам использовать атрибут «mode», чтобы определить, какой стиль загружен.

Шаг 1: Определить несколько styleUrls в определении вашего компонента: 

@Component({
    tag: 'my-component',
    styleUrls: {
        default: 'my-component.default.pcss',
        dark: 'my-component.dark.pcss',
    },
})
export class MyComponent { ... }

Шаг 2: Создание файлов стилей (с общими общими стилями):

  • my-component.common.css 

    :host { display: block }

  • my-component.default.css 

    @import './my-component.common.css';
:host { color: black }

  • my-component.dark.css 

    @import './my-component.common.css';
:host { background: black; color: white }

Шаг 3: Обновите файл stencil.config.ts для использования globalScript: 

export const config: Config = {
    namespace: 'mycomponent',
    globalScript: './src/globals/global.ts',
    ...
}

Шаг 4: Создайте глобальный скрипт и определите функцию «setMode», например: 

import { setMode } from '@stencil/core';

setMode(elm => {
    return (elm as any).mode || elm.getAttribute('mode') || 'default';
});

Шаг 5: Используйте свой пользовательский компонент, например так: 

<!-- default mode -->
<my-component />
<my-component mode="default" />

<!-- dark mode -->
<my-component mode="dark" />

Вы можете настроить функцию setMode для определения режима - например, вы можете найти свойство, установленное в window, или проверить имя_класса для элемента.Тебе решать.Выше приведен простой пример, который позволяет вам использовать атрибут «mode» для элемента ... возвращаясь к «default», если ничего не указано.

0 голосов
/ 27 сентября 2018

В этом случае ваш компонент всегда будет загружать стили, найденные в 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 во время загрузки.Это тот подход, который использует Ionic 4 (между ios и материальным дизайном; вот пример ), но я не верю, что он хорошо документирован о том, как его реализовать.Вам, вероятно, придется покопаться в коде Ionic, чтобы пойти по этому пути.

...