如何在.NET Core中修改DevExpress DxGrid的增删改按钮为Bootstrap样式？

1. 自定义数据列模板（DataCellTemplate） #

如果是自定义操作按钮（非内置命令列），直接用DataCellTemplate完全自定义按钮结构，直接应用Bootstrap类：

<DxGrid Data="@GridData">
    <Columns>
        <!-- 其他数据列 -->
        <DxGridDataColumn>
            <DataCellTemplate>
                @{
                    var item = context.DataItem as YourDataType;
                }
                <button class="btn btn-primary me-2" @onclick="() => EditItem(item)">编辑</button>
                <button class="btn btn-danger" @onclick="() => DeleteItem(item)">删除</button>
            </DataCellTemplate>
        </DxGridDataColumn>
    </Columns>
</DxGrid>

@code {
    IEnumerable<YourDataType> GridData { get; set; }

    async Task EditItem(YourDataType item) {
        await Grid.EditRowAsync(item);
    }

    async Task DeleteItem(YourDataType item) {
        // 执行自定义删除逻辑
    }
}

2. 内置命令列的按钮模板（CommandButtonTemplate） #

针对DxGrid的内置命令列（如编辑、删除、保存），使用官方提供的CommandButtonTemplate替换默认超链接为Bootstrap按钮：

<DxGrid Data="@GridData" @ref="Grid">
    <Columns>
        <DxGridCommandColumn Width="180px">
            <CommandButtonTemplate>
                @{
                    var btnContext = context as GridCommandButtonContext;
                }
                @if (btnContext.CommandButtonType == GridCommandButtonType.Edit) {
                    <button class="btn btn-sm btn-primary me-1" 
                            @onclick="() => Grid.StartEditAsync(btnContext.RowIndex)">
                        编辑
                    </button>
                }
                @if (btnContext.CommandButtonType == GridCommandButtonType.Delete) {
                    <button class="btn btn-sm btn-danger me-1" 
                            @onclick="() => Grid.DeleteRowAsync(btnContext.RowIndex)">
                        删除
                    </button>
                }
                @if (btnContext.CommandButtonType == GridCommandButtonType.Save) {
                    <button class="btn btn-sm btn-success me-1" 
                            @onclick="() => Grid.SaveEditAsync()">
                        保存
                    </button>
                }
                @if (btnContext.CommandButtonType == GridCommandButtonType.Cancel) {
                    <button class="btn btn-sm btn-secondary" 
                            @onclick="() => Grid.CancelEditAsync()">
                        取消
                    </button>
                }
            </CommandButtonTemplate>
        </DxGridCommandColumn>
        <!-- 其他数据列 -->
    </Columns>
</DxGrid>

@code {
    IEnumerable<YourDataType> GridData { get; set; }
    DxGrid Grid { get; set; }
}

3. CSS类覆盖（无模板场景） #

如果不想重构按钮结构，可通过CSS选择器为默认命令按钮追加Bootstrap样式，需确保选择器优先级足够：

/* 给Grid添加自定义类，避免全局样式污染 */
.bootstrap-grid .dxbl-grid-command-btn {
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    text-decoration: none;
    border: 1px solid transparent;
}

/* 编辑按钮样式 */
.bootstrap-grid .dxbl-grid-command-btn.dxbl-grid-edit-btn {
    background-color: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

/* 删除按钮样式 */
.bootstrap-grid .dxbl-grid-command-btn.dxbl-grid-delete-btn {
    background-color: #dc3545;
    color: #fff;
    border-color: #dc3545;
}

/* 悬停状态优化 */
.bootstrap-grid .dxbl-grid-edit-btn:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

在Grid组件上绑定自定义CSS类：

<DxGrid Data="@GridData" CssClass="bootstrap-grid">
    <!-- 列定义 -->
</DxGrid>

方案优先级说明 #

1. 命令列/数据列模板：官方推荐的自定义方式，完全可控，无样式冲突风险，优先选择。
2. CSS覆盖：适合快速修改样式，无需重构模板，但需注意DevExpress版本更新可能导致类名变化，需做好兼容性测试。

内容的提问来源于stack exchange，提问作者MeanGreen