DevExtreme React - HTML-Based Components Customization

This article describes ways to customize HTML-based UI components. A similar article on SVG-based UI components is also available. If you do not know whether your UI component is HTML- or SVG-based, refer to HTML- and SVG-Based UI Components.

Components API

We recommend customizing a UI component using its API. Unlike CSS classes, the API is changed rarely, and if it happens, the UI component populates the browser console with warnings that help you mend your code.

Each UI component has an API described in the UI component's API reference section. For example, you can specify the UI component's width via a corresponding property. In the following example, this property is set for the List UI component.

jQuery
JavaScript
$(function() {
    $("#listContainer").dxList({
        width: 600
    });
});
Angular
HTML
TypeScript
<dx-list
    [width]="600">
</dx-list>
import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
Vue
<template>
    <DxList
        :width="600" />
</template>
<script>
import DxList from 'devextreme-vue/list';

export default {
    components: {
        DxList
    }
}
</script>
React
import React from 'react';
import { List } from 'devextreme-react/list';

class App extends React.Component {
    render() {
        return (
            <List
                width={600}
            />
        );
    }
}

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().List()
    .Width(600)
)

If your page contains multiple instances of the same UI component, you can use the defaultOptions(rule) method to specify a default configuration for all of them in one place. The same method allows you to specify different default configurations for different devices.

In addition, UI components provide templates that you can use for more in-depth customization.

Individual CSS Classes

Because DevExtreme components consist of standard HTML elements (<div>, <td>, <tr>, and so on), you can use CSS classes to customize them.

A number of classes are documented. However, in most cases, you need to inspect the HTML markup to determine and override the applied CSS classes. The following articles describe how you can do it:

Classes can be added to the UI component element in the markup using the class attribute as usual. If it is not possible to change the markup, use the UI component's elementAttr property for the same purpose.

NOTE
The internal CSS structure may be changed between releases without notice. Taking that into account, we recommend customizing UI components using their API instead of CSS if it is possible because you will be notified if the API is changed.

During the customization, we recommend checking how the UI components page will look on different devices by viewing them in responsive design mode. Refer to the articles for Google Chrome, Firefox, or Microsoft Edge for information on how to enter this mode in the browser.