如何为Shiny应用元素添加自定义CSS类？

我有一个由多个fluidRow和column组成的Shiny应用，示例代码如下：

library( shiny )
library( ggplot2 )

ui <- navbarPage(
  'NaVarTitle',
  tabPanel(
    'TAB1',
    fluidRow( column( 4, plotOutput("Plot1") ),
              column( 4, plotOutput("Plot2") ),
              column( 4, plotOutput("Plot3") ),
            )
  ),
  tabPanel(
    'TAB2',
    fluidRow( column( 12, plotOutput("Plot4") ) )
  ),
)

server <- function(input, output, session) {
  output$Plot1 <- renderPlot({
    ggplot() + geom_point( aes(x=1:10, y=1:10) )
  })
  output$Plot2 <- renderPlot({
    ggplot() + geom_point( aes(x=1:10, y=10:1) )
  })
  output$Plot3 <- renderPlot({
    ggplot() + geom_point( aes(x=rep(1,10), y=10:1) )
  })
  output$Plot4 <- renderPlot({
    ggplot() + geom_point( aes(x=1:10, y=10:1) )
  })
}

shinyApp(ui = ui, server = server)

这个应用的UI结构和Bootstrap非常相似，使用的类也接近（通过Pesticide Chrome扩展查看的div结构如下）：

我知道可以通过内联CSS、外部CSS文件或shinythemes来定制样式，但我希望为行和列添加自定义CSS类以实现更个性化的设计。我设想的实现方式如下，但还没找到可行方法：

...
  tabPanel(
            'TAB1',
            class = 'myRowClass',
            fluidRow( column( 4, plotOutput("Plot1"), class= 'myColClass' ),
                      column( 4, plotOutput("Plot2"), class= 'myColClass' ),
                      column( 4, plotOutput("Plot3"), class= 'myColClass' ),
                    )
          ),
  ...

解决方案 #

为Shiny元素添加自定义类其实很简单，以下是完整示例代码：

library( shiny )
library( ggplot2 )
library( dplyr )

ui <- fluidPage(
    tags$head(
    # 注意用HTML()包裹字符串
    tags$style(HTML("\n        @import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');\n        .my_col_class {\n          background-color: black;\n          color: white;\n        }\n        .myrowclass {\n          background-color: pink;\n        }\n        .my_col_class2 {\n          background-color: green;\n        }"))
  ),
    navbarPage(
    'NaVarTitle',
    tabPanel(
      'TAB1',
      fluidRow( column( 4, plotOutput("Plot1") ) %>% tagAppendAttributes( class = 'my_col_class2' ) ,
                column( 4, plotOutput("Plot2"), class="my_col_class" ),
                column( 4, plotOutput("Plot3") ),
                class = 'myrowclass'
              )
    ),
    tabPanel(
      'TAB2',
      fluidRow( column( 12, plotOutput("Plot4") ) )
    )
  )
)

server <- function(input, output, session) {
  output$Plot1 <- renderPlot({
    ggplot() + geom_point( aes(x=1:10, y=1:10) )
  })
  output$Plot2 <- renderPlot({
    ggplot() + geom_point( aes(x=1:10, y=10:1) )
  })
  output$Plot3 <- renderPlot({
    ggplot() + geom_point( aes(x=rep(1,10), y=10:1) )
  })
  output$Plot4 <- renderPlot({
    ggplot() + geom_point( aes(x=1:10, y=10:1) )
  })
}

shinyApp(ui = ui, server = server)

应用效果如下：

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