css - 有没有办法阻止 Shiny 引用 Bootstrap 3 共享文件夹？

Question

在用 sass 编译后，我试图使用我自己的引导样式表。使用

ui <- fluidPage(theme = 'mybootstrap.min.css', ...)

我在 _variables.scss 中更改然后编译的大多数变量都可以正常工作，但也有一些例外。一个是tabsetPanel默认使用名为“shared”的文件夹来依赖于 Bootstrap 版本 3。这会阻止使用我设置的原色。

有没有办法覆盖这个默认行为，以便 Shiny 使用我想要的引导程序的编译版本？

标签： cssrshiny

Answer 1

我明白了，没有从fluidPage. 在这里，我为您提供2个解决方案。

1. 使用一个简单div的而不是fluidPage作为容器，像这样：

library(shiny)

ui <- div(
  tags$script(src = "mybs.min.js"),
  tags$link(rel = "stylesheet", type = "text/css", href = "mybs.min.css")
)

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

shinyApp(ui, server)

手动附加您的自定义 bs 脚本和 CSS 文件。

2. 覆盖内部fluidPage

library(shiny)
bootstrapPage <- function (..., title = NULL, theme = NULL, lang = NULL) {
    args <- list(jqueryDependency(), if (!is.null(title)) tags$head(tags$title(title)),
                 if (is.character(theme)) {
                     if (length(theme) > 1) stop("`theme` must point to a single CSS file, not multiple files.")
                     tags$head(tags$link(rel = "stylesheet", type = "text/css",
                                         href = theme))
                 }, list2(...))
    if (is_bs_theme(theme)) {
        args <- c(bootstrapLib(theme), args)
        ui <- do.call(tagList, args)
    }
    else {
        ui <- do.call(tagList, args)
        # ui <- attachDependencies(ui, bootstrapLib())
    }
    setLang(ui, lang)
}

environment(bootstrapPage) <- asNamespace('shiny')
assignInNamespace("bootstrapPage", bootstrapPage, ns = "shiny")


ui <- fluidPage(
  theme = "abc.css"
)

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

shinyApp(ui, server)

这非常hacky，个人不推荐，除非您是高级用户并清楚后果。所以不详细说明，只是让你知道它会起作用。您可以看到没有附加任何 bs 资源，并且附加了自定义 CSS abc.css。

更新

如果您想使用自定义版本的引导程序，这里是完整的代码

library(shiny)

ui <- div(
  HTML(
    '
    <!-- You dont want include this CDN of css, in your case, use your own CSS, remove the following line.-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    
    <!-- Remember the JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    '
  ),
  tags$link(rel="stylesheet", href=""), # your own css file here
  mainPanel(
    tabsetPanel(
      tabPanel("Plot", plotOutput("plot")),
      tabPanel("Summary", verbatimTextOutput("summary")),
      tabPanel("Table", tableOutput("table"))
    )
  )
)

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

shinyApp(ui, server)