R Shiny DT可编辑单元格字体为白色，如何修改为黑色？

你在编辑R Shiny里的DT datatable单元格时，点击进入编辑模式后，编辑框内字体颜色为白色，和背景色一致导致无法看清内容。

你的代码如下：

output$impelastab = DT::renderDataTable( {
                print("output table")
               print( names(df_merge))
                datatable(   x$df3 , 
                          selection = 'none', editable = list(target = "cell", disable = list(columns = c(0,1)), color = 'black'),  style = "bootstrap" ,
                          rownames = FALSE,
                          options = list( 
                            searching = TRUE,
                            autoWidth = FALSE,
                            columnDefs = list(
                              list(width = '15px', targets = c(0)),
                              list(width = '100px', targets = c(1)),
                              list(width = '60px', targets = c(2))
                            ),
                            paging = TRUE,
                          lengthChange = FALSE,
                          scrollX = '100%',
                          scrollY = '500px',
                          scrollCollapse = TRUE,
                          dom = 'Bfrtip',
                          initComplete = JS(
                            "function(settings, json) {",
                            "$('th', this.api().table().header()).css('color', 'white');",
                            "}"
                          )
                          )
                          ) %>%
                  DT::formatStyle(
                    names(df_merge),
                    color = "white",
                    # fontWeight = "bold",
                    backgroundColor = "transparent",
                    fontStyle = "normal",
                    fontSize = "inherit"
                  ) 
              })

解决方案 #

问题根源是你通过formatStyle全局设置了单元格字体为白色，编辑模式下的输入框继承了这个样式。可以通过以下两种方法修改编辑框字体颜色：

方法一：在initComplete中添加CSS规则

修改initComplete的JavaScript代码，直接给DT编辑输入框设置黑色字体：

initComplete = JS(
  "function(settings, json) {",
  "$('th', this.api().table().header()).css('color', 'white');",
  // 新增这一行，指定编辑输入框的字体颜色
  "$('.dt-edit-input').css('color', 'black');",
  "}"
)

方法二：全局添加自定义CSS样式

在Shiny的UI部分添加tags$style，强制修改编辑输入框的样式：

tags$style(HTML("
  .dt-edit-input {
    color: black !important;
  }
"))

注意：你在editable参数中设置的color='black'是编辑状态下单元格的边框颜色，而非输入框内的字体颜色，所以这个参数不会解决当前问题。

修改后的完整代码示例 #

output$impelastab = DT::renderDataTable( {
  print("output table")
  print(names(df_merge))
  datatable(
    x$df3,
    selection = 'none',
    editable = list(target = "cell", disable = list(columns = c(0,1))),
    style = "bootstrap",
    rownames = FALSE,
    options = list(
      searching = TRUE,
      autoWidth = FALSE,
      columnDefs = list(
        list(width = '15px', targets = c(0)),
        list(width = '100px', targets = c(1)),
        list(width = '60px', targets = c(2))
      ),
      paging = TRUE,
      lengthChange = FALSE,
      scrollX = '100%',
      scrollY = '500px',
      scrollCollapse = TRUE,
      dom = 'Bfrtip',
      initComplete = JS(
        "function(settings, json) {",
        "$('th', this.api().table().header()).css('color', 'white');",
        "$('.dt-edit-input').css('color', 'black');",
        "}"
      )
    )
  ) %>%
    DT::formatStyle(
      names(df_merge),
      color = "white",
      backgroundColor = "transparent",
      fontStyle = "normal",
      fontSize = "inherit"
    )
})

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