Question

我正在使用深色主题（shinythemes中的板岩）创建一个闪亮的应用程序。但是当我应用该主题时，我的renderDataTable输出有两个问题：

应用程序背景太暗，无法看到表格外部的元素（在底部显示XX条目，页码等）
表中的文字太浅，无法阅读。

对于问题2，我已经尝试过renderDataTable领域中的选项，例如formatStyle()，以及css选项，例如list(tags$head(tags$style("shipment.table span {color: #333333 ; background: #999999;}")))，但是我没有运气。我是Shiny，DT和CSS的新手，这可能与它有关...下面的代码注释了我尝试过的示例。

对于问题1，我完全陷入困境。我不知道这些表外元素是什么，所以我没有运气去尝试！

library(shiny)
library(shinythemes)
library(DT)

d=as.data.frame(cbind(1:100,201:300))

ui<-fluidPage(
    theme = shinytheme("slate"),

    mainPanel(
        DT::dataTableOutput('shipment.table')
        #list(tags$head(tags$style("shipment.table span {color: #333333 ; background: #999999;}")))   
        #tags$head(tags$style("#shipment.table table {color: red;}"))
  )  
)


server<-function(input, output,session) {

output$shipment.table <- renderDataTable(d,filter = 'bottom',
       options = list(lengthMenu = list(c(10,20,50,100,-1), c('10','20','50','100','All')),
       pageLength = 10,autoWidth = TRUE),rownames=F) #%>% formatStyle(1,color="black")
}


shinyApp(ui=ui,server=server)

如果您运行该应用程序，则会在左上角看到一个带有“ 10”的下拉框，但该框的前后应有文本，以便显示“正在显示10个条目”。右下角还有一个1，但应该还有其他几页可见（它们只是深色背景上的深色文本）。同样，表格文字在较浅的灰色/白色背景上为浅灰色，难以阅读。感谢您的帮助！

Answer 1

amrrs有一个很好的答案，但是它仍然没有解决您更改页码颜色的其他问题。您可以通过添加

library(shiny)
library(shinythemes)
library(DT)

d=as.data.frame(cbind(1:100,201:300))

ui<-fluidPage(
  theme = shinytheme("slate"),



  mainPanel(

    ### add your style inline css values here

    ### added a line of code here too `.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover `###
    tags$style(HTML("
                    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
                    color: #ffffff;
                    }
### ADD THIS HERE ###
                    .dataTables_wrapper .dataTables_paginate .paginate_button{box-sizing:border-box;display:inline-block;min-width:1.5em;padding:0.5em 1em;margin-left:2px;text-align:center;text-decoration:none !important;cursor:pointer;*cursor:hand;color:#ffffff !important;border:1px solid transparent;border-radius:2px}

###To change text and background color of the `Select` box ###
                    .dataTables_length select {
                           color: #0E334A;
                           background-color: #0E334A
                           }

###To change text and background color of the `Search` box ###
                    .dataTables_filter input {
                            color: #0E334A;
                            background-color: #0E334A
                           }

                    thead {
                    color: #ffffff;
                    }

                     tbody {
                    color: #000000;
                    }

                   "


                    ))
  ),
    DT::dataTableOutput('shipment.table')
    #list(tags$head(tags$style("shipment.table span {color: #333333 ; background: #999999;}")))   
    #tags$head(tags$style("#shipment.table table {color: red;}"))
  )  



server<-function(input, output,session) {

  output$shipment.table <- renderDataTable(d,filter = 'bottom',
                                           options = list(lengthMenu = list(c(10,20,50,100,-1), c('10','20','50','100','All')),
                                                          pageLength = 10,autoWidth = TRUE),rownames=F) #%>% formatStyle(1,color="black")
}


shinyApp(ui=ui,server=server)

Answer 2

您可以在代码中添加内联css来控制此行为。

library(shiny)
library(shinythemes)
library(DT)

d=as.data.frame(cbind(1:100,201:300))

ui<-fluidPage(
  theme = shinytheme("slate"),



  mainPanel(

    ### add your style inline css values here

    tags$style(HTML("
                    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
                    color: #ffffff;
                    }

                    thead {
                    color: #ffffff;
                    }

                     tbody {
                    color: #000000;
                    }

                   "


                    ))
  ),
    DT::dataTableOutput('shipment.table')
    #list(tags$head(tags$style("shipment.table span {color: #333333 ; background: #999999;}")))   
    #tags$head(tags$style("#shipment.table table {color: red;}"))
  )  



server<-function(input, output,session) {

  output$shipment.table <- renderDataTable(d,filter = 'bottom',
                                           options = list(lengthMenu = list(c(10,20,50,100,-1), c('10','20','50','100','All')),
                                                          pageLength = 10,autoWidth = TRUE),rownames=F) #%>% formatStyle(1,color="black")
}


shinyApp(ui=ui,server=server)

如何更改闪亮的应用程序dataTableTableOutput字体颜色和辅助表格元素颜色？

2 个答案: