DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序，该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。
本文介绍自定义基于HTML的UI组件的方法。
组件的API
官方建议使用UI组件的API来自定义它，与CSS类不同，API很少被更改。如果发生更改，UI组件将用警告填充浏览器控制台，帮助开发人员修复代码。
每个UI组件都有一个在UI组件的API参考部分中描述的API，例如开发人员可以通过相应的属性指定UI组件的宽度。在下面的例子中，这个属性是为List UI组件设置的。
jQuery
JavaScript
- $(function() {
- $("#listContainer").dxList({
- width: 600
- });
- });
ASP.NET MVC控件
Razor C#
- @(Html.DevExtreme().List()
- .Width(600)
- )
如果页面包含同一个UI组件的多个实例，开发人员可以使用defaultOptions(rule) 方法在一个地方为所有这些组件指定默认配置，相同的方法允许开发者为不同的设备指定不同的默认配置。
此外，UI组件提供了可以用于更深入自定义的模板。
单个CSS类
由于DevExtreme组件包含标准的HTML元素（
文档中记录了许多类，但是在大多数情况下，开发人员需要检查HTML标记来确定和覆盖应用的CSS类。
可以像往常一样使用class属性将类添加到标记中的UI组件元素中，如果不可能更改标记，则使用UI组件的elementAttr属性来实现相同的目的。
注意：CSS内部结构可能在不同版本之间更改而不另行通知。考虑到这一点，我们建议在可能的情况下使用它们的API替代CSS来自定义UI组件。因为如果API发生了更改，开发人员将收到通知。
在自定义过程中，建议通过响应式设计模式查看UI组件页面再不同设备上的外观。