Kendo Angular 2 个主题

Question

我正在尝试了解如何自定义主题，如下所述：

http://www.telerik.com/kendo-angular-ui/components/styling/

我想不通的是在自定义主题部分下。它描述了能够直接在您自己的应用程序中更改 scss 变量，但这对我不起作用。我究竟需要哪些参考文献才能做到这一点？

$accent: #ff69b4;

@import "~@progress/kendo-theme-default/scss/all";

我可以将它放入我的组件样式文件中...但我仍然遗漏了一些东西（它什么也没做）。

他们在这里引用的 "correct path to modules" 是什么？

@Component({
  selector: 'my-app',
  styleUrls: [
    // load the default theme (use correct path to modules)
    'styles.scss'

Answer 1

由于 style encapsulation，如果你把它放在一个组件中，它将只应用于你的组件自己的 html。

您希望您的主题应用到整个 html，因此您可以将它放在您的根组件（通常是应用程序组件）上并将 ViewEncapsulation 设置为 none，或者将它放在在 <head>.

中声明的全局 scss 文件

这是第一个选项的一些代码（在我看来是最干净的）：

app.component.ts :

@Component({
    selector: 'app',
    template: require('./app.component.html'),
    encapsulation: ViewEncapsulation.None,
    styles: [require('./app.component.scss')]
})

app.component.scss :

/* Redefine here all the kendo theme variables you want */
$accent: red;

@import "~@progress/kendo-theme-default/scss/all";

现在，这意味着您必须能够在您的项目中使用 scss。例如，使用 webpack，你可以这样做：

module: {
    loaders: [
        { test: /\.scss$/, loader: 'to-string!css!sass' },
        ...

您将需要使用 css-loader 和 sass-loader npm 包。

您可以在 _variables.scss 文件中找到您可以自定义的所有变量： https://github.com/telerik/kendo-theme-default/blob/master/scss/_variables.scss

Kendo Angular 2 个主题

Kendo Angular 2 Themes

kendo-ui-angular2

angular