DT包v0.26版本选中行background-color设置异常咨询

1. DT包v0.25到v0.26版本选中行默认背景色是否变更？ #

是的，确实发生了变更。DT包v0.26版本同步了DataTables官方的样式更新，调整了组件的默认视觉表现，其中就包括选中行的背景色——从v0.25版本的偏蓝色调，改为了更柔和的浅灰/淡蓝色系（具体色调取决于配套的DataTables主题）。

2. 为何v0.26版本中修改默认background-color的操作不再生效？ #

问题核心在于CSS选择器优先级和新版本的样式结构变化：

• v0.26版本中，DT对选中行的样式定义使用了更具体的CSS选择器（新增tbody层级），比如table.dataTable tbody tr.selected > td, table.dataTable tbody td.selected；而你之前的自定义选择器table.dataTable tr.selected td, table.dataTable td.selected未包含tbody，优先级低于默认样式，即使添加!important也可能被覆盖。
• 部分新版本的DT样式引入了CSS变量（如--dt-row-selected）来统一控制选中行样式，旧自定义代码未针对变量修改，因此无法覆盖默认值。

修复方案 #

调整自定义CSS的写法，确保优先级足够或直接修改对应变量：

方案1：使用更具体的选择器（兼容旧写法逻辑）

将自定义样式替换为：

table.dataTable tbody tr.selected > td, table.dataTable tbody td.selected {
  background-color: #FC8995 !important;
}

方案2：修改CSS变量（推荐，无需!important）

如果使用的DT版本支持CSS变量，直接修改全局变量即可：

:root {
  --dt-row-selected: #FC8995;
}

调整后的测试代码示例 #

修改testApp中的样式部分：

if (isTRUE(change_background_color)) {
  # 方案1：更具体的选择器
  tags$style(HTML('table.dataTable tbody tr.selected > td, table.dataTable tbody td.selected {background-color: #FC8995 !important;}'))
  # 或者方案2：修改CSS变量
  # tags$style(HTML(':root {--dt-row-selected: #FC8995;}'))
}

调整后在v0.26版本中即可正常自定义选中行背景色。

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