发表新帖

发表新帖

Kendo Angular 2 Themes

前端未结

关注

 1  1881

I\'m trying to figure out how to customize a theme as outlined here:

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

What I can\'t figure out is

相关标签:

1条回答

没有蜡笔的小新

2021-01-14 07:51
Due to style encapsulation, if you put this in a component it's going go be applied only to your component's own html.

You want your theme to be applied to the whole html, so you can either put this on your root component (usually app component) with ViewEncapsulation set to none, or put this in a global scss file declared in your <head>.

Here's some code for the first option (the cleanest, in my opinion) :

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";
```
Now, this means you have to be able to use scss on your project. For example, with webpack, you can do this:
```
module: {
    loaders: [
        { test: /\.scss$/, loader: 'to-string!css!sass' },
        ...
```
You will need to use css-loader and sass-loader npm packages.

You can find all the variables you can customize in the _variables.scss file : https://github.com/telerik/kendo-theme-default/blob/master/scss/_variables.scss
0 讨论(0)
发布评论:

提交评论
- 加载中...

热议问题