如何为Oracle Apex交互式网格(IG)的添加行/编辑按钮设置热按钮样式？

完全可以实现，以下是两种常用方法，让IG按钮和页面热按钮样式保持一致：

方法一：自定义CSS（推荐） #

通过CSS直接覆盖IG按钮样式，匹配主题自带的热按钮风格：

1. 打开目标页面的页面属性，找到CSS > 内联CSS区域
2. 添加以下代码，可直接复用主题变量或硬编码颜色：

/* 复用主题热按钮变量（主题支持时优先使用） */
.a-IG-action--addRow .t-Button,
.a-IG-action--edit .t-Button {
    background-color: var(--ut-button-hot-bg);
    border-color: var(--ut-button-hot-border);
    color: var(--ut-button-hot-text);
}

.a-IG-action--addRow .t-Button:hover,
.a-IG-action--edit .t-Button:hover {
    background-color: var(--ut-button-hot-hover-bg);
    border-color: var(--ut-button-hot-hover-border);
}

若主题不支持CSS变量，可直接写死颜色（以默认红色热按钮为例）：

.a-IG-action--addRow .t-Button,
.a-IG-action--edit .t-Button {
    background-color: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

.a-IG-action--addRow .t-Button:hover,
.a-IG-action--edit .t-Button:hover {
    background-color: #b91c1c;
    border-color: #b91c1c;
}

方法二：JavaScript动态添加样式类 #

通过JS为按钮添加Apex自带的t-Button--hot类，实现样式统一：

1. 打开页面的动态行为，创建一个页面加载时执行的动作
2. 添加以下代码：

// 为添加行按钮加热按钮类
const addRowBtn = document.querySelector('.a-IG-action--addRow .t-Button');
if (addRowBtn) addRowBtn.classList.add('t-Button--hot');

// 为编辑按钮加热按钮类
const editBtn = document.querySelector('.a-IG-action--edit .t-Button');
if (editBtn) editBtn.classList.add('t-Button--hot');

注意：如果交互式网格会动态刷新，需将这段代码放在IG的刷新后事件中，确保按钮重新渲染后样式生效。

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