如何在闪亮的应用程序中正确覆盖默认样式？

Question

我想先说明一下，我已经查看了一些稍微相似的问题的答案，但无法完全找到我要找的东西。

我的主要工作是数据开发人员，但是我在网络开发方面有很多经验。因此，当我目前正在构建我的新 Shiny 应用程序时，我决定创建自己的 CSS 和 JS 文件，这样我就可以自己添加功能，因为我在这方面有很多经验，而 Shiny 经验很少（很多与 R 只是不与 Shiny 本身）。我使用 importCSS() 创建并导入了我的 CSS 文件，但是我遇到了 body 和 button 等样式的问题。

Shiny 似乎使用了 bootstrap，因此我在我的样式表后添加了一堆默认 bootstrap 样式表 DOM。这导致我的按钮样式和主体样式被默认 bootstrap 样式覆盖。我知道我可以通过仅使用 ID 来为 !important 标签设置 and/or 样式来从技术上解决这个问题，但是我认为这是一种不好的做法，因为通常我更喜欢在类上完成样式，并且在 CSS 文件中到处使用 !important 是一个很大的禁忌。

我的最终问题是；有没有办法让我直接将 CSS 放在 R Shiny 的头部底部？ CSS 文件在头部的正确排序是我通常拥有正确样式的方式，但是我似乎无法使用 importCSS() 或 [= 指定我的 CSS 文件的链接位置16=]语法。有没有办法做到这一点，或者我唯一真正的解决方案是咬紧牙关并使用 ID/!important 样式？

感谢您的帮助。

Answer 1

Shiny 允许您禁用 bootstrap 让您自由地从头开始您的造型：

library(shiny)

ui <- fluidPage(
  tags$head(
    # Note the wrapping of the string in HTML()
    tags$style(HTML("
      body {
        background-color: black;
        color: white;
      }"))
  ),
  tagList(
    suppressDependencies("bootstrap"),
    tags$p("Hello, world!")
  ),
  textInput("text", "text"),
  numericInput("number", "number", 123)
)

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

}

shinyApp(ui, server)

Answer 2

一切都很好，我想通了。我的解决方案是使用 www 文件夹并使用标签引用直接 link 到样式表和图像。下面的代码适用于遇到此问题的任何其他人。如果有更好的方法，请在此处执行 post！

文件结构：

RShinyProject
│---app.R
│
└───www
    |---Company_Logo.png
    |---style.css

要放置在 fluidPage()

中的代码

tags$head(
      tags$link(rel = "icon", href = "ARHAI_logo.png"),
      tags$link(rel = "stylesheet", href = "style.css")
    )

如何在闪亮的应用程序中正确覆盖默认样式？

How can I properly override default styles in a shiny application?

r

shiny