Styling KendoReact Server Components

For effective styling of KendoReact Server Components, we recommend utilizing our sass distribution. This approach allows you to leverage the Progress Design System variables, offering extensive customization options for the components look and feel.

KendoReact Server Components are in an experimental phase and are not intended for production use. APIs may change without introducing a breaking change. Please refer to the Umbrella GitHub issue for general feedback, bug reports, and more information.

Using SASS

Configuring sass may vary based on your build tooling. Since React Server Components are currently supported only by Next.js, we will use it as an example, where you just need to install the sass package:

Copy Codenpm install sass

Importing the Theme

Kendo Themes is a collection of four beautiful themes that comes with a total of 18 different Swatch color variations.

To import a theme, start by creating a sass file housing your application styles:

Copy Code// theme.scss
@use "@progress/kendo-theme-default/dist/all.scss" as *;

Then, import the theme in your application layout:

Copy Code// layout.tsx

import "./theme.scss";

Design System Variables

To apply customization through the Design System variables, please refer to the Progress Design System documentation.

Defining only chosen sass variables allows you to override the variable's default value without modifying the entire theme source code:

Copy Code// theme.scss

$kendo-base-bg: #ff69b4;
@import "@progress/kendo-theme-default/dist/all.scss";

Partial Theming

KendoReact themes also allow loading only the styles necessary for the components in use by importing the sass files related to them.

Since only the Grid component is available as a Server Component at the moment, you can import its sass file like this:

Copy Code//  theme.scss

@use "@progress/kendo-theme-default/scss/grid/" as *;

Suggested Links

• КendoReact Server Grid Overview
• KendoReact Styling Overview
• Progress Design System