Подключение css-стилей к контролу

Без темизации

Чтобы указать стили контролов без темизации (например использующих CSS без LESS), в файле *.ts задают значение для статического поля _styles. В нем можно указать зависимость от CSS-файлов, которые не будут собираться с темами: такие CSS собираются в оригинальном модуле и загружаются из него.

// TodoInput.ts
import * as BaseControl from 'Core/Control';
import template = require('wml!TodoMvc/_todo/TodoInput');
 
class TodoInput extends BaseControl {
   private _template: Function = template;
   static _styles: Array<String> = ["TodoMvc/helpers/todo_helpers"];
}
 
export default TodoInput;

├─── TodoMvc
│    ├─── _todo
│    │    ├─── TodoInput.less
│    │    ├─── TodoInput.wml
│    │    └─── TodoInput.ts
│    ├─── TodoMvc.s3mod
│    ├─── helpers
│    │    └─── todo_helpers.less

С темизацией

При описании класса контрола в статическом поле _theme необходимо указать пути до нужных less-файлов со стилями.

В следующем примере показано содержимое файла TodoInput.ts и его расположение в интерфейсном модуле TodoMvc.

// TodoInput.ts
import * as BaseControl from 'Core/Control';
import template = require('wml!TodoMvc/_todo/TodoInput');
 
class TodoInput extends BaseControl {
  private _template: Function = template;
  static _theme: Array<String> = ["TodoMvc/_todo/TodoInput"];
}
 
export default TodoInput;

├─── TodoMvc
│    ├─── _todo
│    │    ├─── _TodoInput.less
│    │    ├─── TodoInput.wml
│    │    └─── TodoInput.ts
│    ├─── TodoMvc.s3mod
│    ├─── TodoMvc-todo-theme.s3mod
├─── TodoMvc-todo-theme
│    ├─── _todo
│    │    ├─── TodoInput.less

Наследование от контрола с предустановленными статическими полями _styles и _theme

При наследовании от контрола, у которого уже определены статические поля _styles или _theme, нужно явно указывать наследование стилей в этих полях.

В следующем примере показано содержимое файла Tabs.ts, где класс контрола TodoInput наследуется от BaseControl.

// TodoInput.ts
import * as BaseControl from 'Core/Control';
import template = require('wml!TodoMvc/_todo/TodoInput');
 
class TodoInput extends BaseControl {
   private _template: Function = template;
   static _styles: Array<String> = ["TodoMvc/helpers/todo_helpers"].concat(BaseControl._styles);
   static _theme: Array<String> = ["TodoMvc/_todo/TodoInput"].concat(BaseControl._theme);
}
 
export default TodoInput;