Question

我有2个textInput和2个selectInput函数。一个在我的侧边栏上的深色背景上，另一个在白色上（在bsModal内）。我的问题是：有没有办法用不同的方式来样式化它们？理想情况下，我希望将样式保持在侧边栏上，对于bsModal内部的样式，至少要更改字体颜色和边框颜色。

代码：

## Shiny 
library(shiny)
library(shinydashboard)
library(shinyBS)

ui <- dashboardPage(
  ## Header ----
  dashboardHeader(
    disable = TRUE
  ),

  ## Sidebar ----
  dashboardSidebar(
    sidebarMenu(
      div(style = "border-left-color: #1e282c; padding: 10px", 
      menuItem(text = div(HTML("<left>Search</left>")),
               tabName = "search",
               icon = icon("search", "fa-2x"))
    )
  )
  ),

  ## Body ----
  dashboardBody(
    ## when header is disabled need to compensate for the missing 50px 
    ## to avoid empty space on the bottom
    tags$script('window.onload = function() {
                function fixBodyHeight() {
                var el = $(document.getElementsByClassName("content-wrapper")[0]);
                var h = el.height();
                el.css("min-height", h + 50 + "px");
                };
                window.addEventListener("resize", fixBodyHeight);
                fixBodyHeight();
                };'),

    tags$style(HTML(
      "
      .well{
  background-color: #222C3C;
  color: #FFFFFF;
      }
.form-control {
  background-color: transparent;
  border: 0px;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
}

.selectize-input{
  background: transparent;
}

.selectize-input.items.not-full.has-options {
  border: 0px;
  border-bottom: 1px solid #ffffff;
  border-radius: 0;
} 

.selectize-dropdown, .selectize-input, .selectize-input input{
  color: #FFFFFF;
}
.selectize-control.multi .selectize-input > div{
  background: rgb(9, 231, 178, 0.3);
  color: #ffffff;
}

.selectize-dropdown-content {
  background: #1B2431;
  color: #ffffff;
  border-radius: 4px;
}

.selectize-input.full{
  background-color: transparent;
  color: #FFFFFF;
  border: 0px;
  border-bottom: 1px solid #ffffff;
  border-radius: 0;
}

.selectize-input, .selectize-control.single, .selectize-input.input-active{
  background: transparent !important;
}
      "

    )),

    # includeCSS("www/style.css"),

    tabItems(
      tabItem(
        tabName = "search",
        sidebarLayout(
          sidebarPanel(
            tabsetPanel(
              tabPanel(div("Search task"),
                       textInput("searchTextIn", HTML("<i class='fa fa-search'></i> KEYWORDS"), value = ""),
                       selectizeInput("productFilter", HTML("<i class='fa fa-share-alt gly-rotate-135'></i> PRODUCT OR COMPONENT"),
                                      choices = c("A", "AAA", "B", "BBBBBB", "C", "CCCCCC"),
                                      multiple = TRUE,
                                      selected = c("A", "AAA")), 
                                      actionLink("saveToGroup", HTML("<u> Save to group </u>"), style = "color: #d3d3d3cf"),
                                      width = 3)
              )),
          mainPanel(
            bsModal("saveToGroupPopup", "Save to group", "saveToGroup",
                    div(selectizeInput("saveToGroupSelection",
                                       "Add this search to a search group:",
                                       choices = c("Category A", "Category B", "Category C", 
                                                   "Batman"),
                                       selected = NULL,
                                       multiple = TRUE,
                                       options = list(maxItems = 1))),
                    textInput("saveToGroupNew", label = NULL, value = "", 
                              placeholder = "Create new…")
            )
          )
        )
      )
    )
  )
)



server <- function(input, output) {}

shinyApp(ui = ui, server = server)

Answer 1

您可以使用魅力来改变输入的样式。基本上，glamor允许您使用类似JavaScript的条件编写CSS。只需将布尔变量与类一起传递，然后在该变量的基础上选择文本字段的样式

const descDiv = **isDark** => css({
    color: isDark ? color.white : colors.gray,
    marginBottom: isDark? '0rem' :'1rem',
    letterSpacing:isDark ? '0px' :'-0.6px', //if isDark true 0px else -0.6px
    width:isDark? '10rem' :'13.5rem'
});

Answer 2

一个对我有用的解决方案是textInput实际上很简单，我要做的就是在CSS中：

textInput(id, "")
tags$style(HTML("
#id.form-control{color:gray;}
"))

对于selectize输入来说，有些混乱：

selectizeInput(id, ....)
tags$style(HTML("
#id + div>.selectize-input.items.not-full.has-options{border-bottom: 1px solid #F2F2F2;}
#id + div>.selectize-dropdown, #id+ div>.selectize-input, #id+ div>.selectize-input input{ color: gray;}
#id + div> div> .item {color: gray;}
"))

闪亮：textInputs和selectInputs的样式不同

2 个答案: