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:
npm 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:
// theme.scss
@use "@progress/kendo-theme-default/dist/all.scss" as *;
Then, import the theme in your application layout:
// 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:
// 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:
// theme.scss
@use "@progress/kendo-theme-default/scss/grid/" as *;