Styling Overview

KendoReact provides themes that you can used to style your application.

Currently, KendoReact ships the following themes:

  • Default theme—Available through the @progress/kendo-theme-default NPM module.
  • Bootstrap theme—Available through the @progress/kendo-theme-bootstrap NPM module.
  • Material theme—Available through the @progress/kendo-theme-material NPM module.

Installation

  1. To start using a theme, install its package through NPM. For example, to install the Default theme, run the following command:

    npm install --save @progress/kendo-theme-default
  2. After the theme package is installed, reference it in your project.

Including Themes in Your Project

Each theme package provides the two ways for including the theme in your project:

Using Precompiled CSS

Each theme includes a precompiled dist/all.css CSS file that contains the styles for all KendoReact components. To use dist/all.css, reference it in the App.jsx file of the application.

import '@progress/kendo-theme-default/dist/all.css';

class App extends React.Component {
    render() {
        return (
            <h1>My First KendoReact App</h1>
            <Button primary={true}>
                My Button with KendoReact styles
            </Button>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

While using the precompiled CSS file is faster than compiling the theme from the source code, the approach has the following drawbacks:

  • It includes CSS for components that are not used in the application.
  • It does not provide options for theme customization through SCSS variables (which is possible when you build the theme from the source code) because the theme is already compiled.

Customizing Themes

Each KendoReact theme package includes the source files of the theme which provides options for you to modify and rebuild the theme as part of your build process. For example, you can change the theme colors, remove the CSS of unused components, or use specific theme colors to style your application. The theme source files are located in the scss folder of the theme package.

For a list of variables that can be modified in a theme, refer to the article on each theme customization:

To build a custom theme by using the theme variables, apply either of the following approaches:

For a visual preview of the theme for all components and versatile color swatches, use the ThemeBuilder application which provides an interface for theme customization.

Using the Build Process of the Application

Create React App does not support the compilation of SCSS files out of the box. For more information, refer to the Adding a Sass Stylesheet article.

  • To use Node Sass (which uses LibSass), run the npm install node-sass --save command.
  • To use Dart Sass, run the npm install node-sass@npm:sass --save command.
// App.scss
@import "~@progress/kendo-theme-default/dist/all.scss";

With this setup, you can customize theme variables directly in your application. For example, you can change the default primary color from orange to pink with the following lines:

$primary: #ff69b4;

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

The dist/all file adds the styles for all components that are available in the theme. To trim down the size of the generated CSS, import only the source for the components that you use in your application. Each of them could be found in scss/ folder.

// Import only the PanelBar and Grid styles using Node Sass
@import "~@progress/kendo-theme-default/scss/panelbar/_index.scss";
@import "~@progress/kendo-theme-default/scss/grid/_index.scss";

// or using Dart Sass
@import "~@progress/kendo-theme-default/scss/panelbar/";
@import "~@progress/kendo-theme-default/scss/grid/";

Using the Build Process of the Themes

While each KendoReact theme has a dedicated NPM package (for example, @progress/kendo-theme-default), the source code for all themes is located in the kendo-themes repository which contains a build task that compiles the theme sources to CSS. To customize a theme, modify the source code of the theme and use the build task to produce a CSS file for your application. This approach avoids the need for a setting up a build configuration when you compile SCSS, but may be harder to maintain as the process has to be repeated each time a theme is updated.

To improve the development process, the previous independent GitHub repositories of each theme were merged in the single kendo-themes repository and the individual repositories were archived.

Customizing Themes with Swatches

A swatch is a set of variables which customizes the appearance of the theme.

  • Each swatch is placed in a separate file. A theme may contain multiple swatches.
  • Swatches are useful for creating multiple, persistent theme variations.
  • The .css output file can be shared across projects and requires no further processing.

To create a swatch:

  1. Clone the kendo-themes GitHub repository.
  2. Install the node-gyp.
  3. Install the dependencies for all themes with npm install && npx lerna bootstrap.
  4. Switch the working directory to packages/&lt;THEME_NAME&gt;.
  5. Create a SWATCH_NAME.scss swatch file in the scss/swatches folder.
  6. To build the swatches for the theme by running npm run sass:swatches or npm run dart:swatches.
  7. Include the compiled CSS swatch file in your project. It could be found under dist/SWATCH_NAME.css.

For example, in the Material theme create blue-pink-dark swatch with the following lines:

// Variables.
$primary-palette-name: blue;
$secondary-palette-name: pink;
$theme-type: dark;

// Import the theme file for the components you use.
@import "../panelbar/_index.scss";
@import "../grid/_index.scss";

// Alternatively, include all components.
@import "../all.scss";

For the Default and Bootstrap themes, the swatch should look like:

// Variables.
$primary: blue;
$secondary: pink;

// Import the theme file for the components you use.
@import "../panelbar/_index.scss";
@import "../grid/_index.scss";

// Alternatively, include all components.
@import "../all.scss";

Customizing the Source Code

To create a custom theme by modifying the themes source code:

  1. Clone the kendo-themes GitHub repository.
  2. Install the dependencies for all themes with npm install && npx lerna bootstrap.
  3. Customize the theme variables in the packages/THEME_NAME/scss/_variables.scss files.
  4. Build the themes with the npm run sass or npm run dart command to create the customized version of the themes in the packages/THEME_NAME/dist/all.css file.
  5. After the build completes, use the compiled CSS.