All Components

Styling Overview

Kendo UI for React provides themes that can be used to style your application.

Currently, the suite ships the following themes:

Installation

To start using a theme, install it through NPM.

npm install --save @progress/kendo-theme-default

The Kendo UI Bootstrap theme depends on the Twitter Bootstrap framework. To install the theme:

  1. Run npm install --save @progress/kendo-theme-bootstrap.
  2. Install the version of the bootstrap framework specified as a peer dependency.

After the theme package is installed, reference it in your project.

Including Themes in Your Project

To include a theme in your application, either:

Using Precompiled CSS

Each Kendo UI theme for React includes an all.css file with precompiled styles that can be used as a ready solution for theming the available Kendo UI components for React.

To style your components by using the precompiled CSS options, either:

Including the Styles in the Application HTML

To include the theme with its precompiled CSS in the HTML which hosts your application, use a similar approach to the approach you use to any other HTML page.

<link rel="stylesheet" href="/node_modules/@progress/kendo-theme-default/dist/all.css" />

Loading the Styles along with the Component

When you include the theme with its precompiled CSS through the styleUrls property of the component, the styles will be loaded along with the component.

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

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

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

Using the Build Process of the Application

  1. Load the Kendo UI Default theme for React and import its SCSS sources into your project.

    import '../../node_modules/@progress/kendo-theme-default/dist/all.css';
    
    class App extends React.Component {
       render() {
           return (
               <h1>My First Kendo UI React App</h1>
               <Button primary={true}>
                   My Kendo UI Button
               </Button>
           )
       }
    }
    
    ReactDOM.render(
       <App />,
       document.querySelector('my-app')
    );
    // styles.scss
    @import "~@progress/kendo-theme-default/scss/all";
  2. The setup from the previous example enables you to add or remove theme variables directly in your application. The basic set of variables that you can use to customize your theme is located in the _variables.scss file.

    The following example demonstrates how to style the button in pink by changing the $accent variable before you import the theme.

    $accent: #ff69b4;
    
    @import "~@progress/kendo-theme-default/scss/all";

    To trim down the size of the generated CSS, build only the CSS for the components that you use in your application. To do this, include their source.

    // import only the PanelBar and Grid styles
    @import "~@progress/kendo-theme-default/scss/panelbar";
    @import "~@progress/kendo-theme-default/scss/grid";

For the complete implementation of this approach, refer to the ng2-dashboard sample application.

Using the Build Process of the Theme

Theme repositories provide a build task that compiles their source to CSS.

To customize and build the theme:

  1. Clone the theme repository.
  2. Install the theme dependencies with npm install.
  3. Customize the theme variables in the scss/_variables.scss file.
  4. Build the theme with npm run build to create the customized version of the theme in the dist/all.css file.

    You might need to skip the styles for some of the components. To include only the styles that you need, run the COMPONENTS='component1,component2' npm run build command. For example, to create a CSS file that includes only the Grid and PanelBar styles, run COMPONENTS='panelbar,grid' npm run build. The command creates the dist/custom.css file which includes only the specified components.

After the build completes, use the compiled CSS.

In this article