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.