gpt4 book ai didi

angular - Kendo Angular 2 主题

转载 作者:行者123 更新时间:2023-12-02 10:46:00 26 4
gpt4 key购买 nike

我正在尝试弄清楚如何自定义主题,如下所述:

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

我不明白的是在“自定义主题”部分下。它描述了能够直接在您自己的应用程序中更改 scss 变量,但这对我不起作用。我到底需要什么引用资料才能做到这一点?

$accent: #ff69b4;

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

我可以将其放入我的组件样式文件中...但我仍然缺少一些东西(它什么也不做)。

他们在此处引用的“模块的正确路径”是什么?

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

最佳答案

由于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

关于angular - Kendo Angular 2 主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41856955/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com