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

user_15360501 0
Viewed 54

I would like to preface this by saying that I've looked through answers to slightly similar questions but couldn't quite find what I was looking for.

My main job is a data developer however I have a lot of experience with web development. As such, when I was currently building my new shiny app I decided to create my own CSS and JS files so I could add the functionality myself, since I have tons of experience in this area vs little experience with Shiny (plenty with R just not with Shiny itself). I created and imported my CSS file using importCSS() however I'm getting an issue with styling things like the body and button's.

It's seems that Shiny uses bootstrap and as a result I'm getting a bunch of default bootstrap stylesheets added after my stylesheet in the DOM. This is resulting in my button styles and my body styles being overwritten by the default bootstrap style. I know that I can technically solve this by just using ID's to style and/or the !important tag, however I would consider this bad practise as generally I prefer styles to be done on classes, and using !important everywhere in a CSS file is a big no-no.

My ultimate question is; is there a way for me to directly place my CSS at the bottom of the head in R Shiny? Correct ordering of CSS files in the head is how I would normally have proper styling, however it doesn't seem like I can specify where my CSS file is linked using importCSS() or tag$link syntax. Is there a way to do this, or is my only real solution to just grit my teeth and use ID/!important styling?

Thanks for any help.

shiny r
2 Answers

Shiny allows you to disable the use of bootstrap giving you the freedom to start your styling from scratch:

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)

enter image description here

user_168531140

It's all good, I figured it out. The solution for me was to use a www folder and directly link to the stylesheet and images using tag references. Code below for anyone else that gets stuck with this. If there's any better way do post here!

File Structure:

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

Code to place in fluidPage()

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