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 Styling Methods.

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.

$(function() {
    $("#listContainer").dxList({
        width: 600
    });
});

<dx-list
    [width]="600">
</dx-list>

import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

<template>
    <DxList
        :width="600" />
</template>
<script>
import DxList from 'devextreme-vue/list';

export default {
    components: {
        DxList
    }
}
</script>

import React from 'react';
import { List } from 'devextreme-react/list';

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

export default App;

@(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.

DevExtreme components consist of standard HTML elements (for instance, <div>, <td>, and <tr>). You can use CSS classes to customize these elements.

For a list of common CSS classes used in DevExtreme components, see CSS Classes. To identify classes for specific visual elements, inspect the component markup:

• How to inspect CSS rules
• Use CSS to Customize Control Appearance

To add custom classes to a DevExtreme component's root element, specify the class HTML attribute. You can also configure a component's elementAttr or wrapperAttr property.

After you apply CSS customizations to DevExtreme components, review your application's adaptivity in the browser. For more information, refer to the following topics:

• Google Chrome - Simulate mobile devices with device mode
• Microsoft Edge - Emulate mobile devices (Device Emulation)
• Firefox - Responsive Design Mode