更改'shinydashboardPlus:：descriptionBlock（）的默认CSS样式`

我觉得

shinydashboardPlus:：descriptionBlock（）

相当不错，但我有点沮丧，因为无法在R中更改它的样式。我们如何才能做到这一点

• 标题

  必须为粗体

• 文本

  必须为大写
• 使用

  number

  中的

  HTML（）

  将图标置于下一行

展示案例：

library(shiny)
library(shinydashboard)
shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      box(
        solidHeader = FALSE,
        title = "Status summary",
        background = NULL,
        width = 4,
        status = "danger",
        footer = fluidRow(
          column(
            width = 6,
            descriptionBlock(
              number = "17%", 
              numberColor = "green", 
              numberIcon = "caret-up",
              header = "not bold please", 
              text = "set me in lowercase please", 
              rightBorder = TRUE,
              marginBottom = FALSE
            )
          ),
          column(
            width = 6,
            descriptionBlock(
              number = HTML("<h4>icon?</h4>"), 
              numberColor = "red", 
              numberIcon = "skull-crossbones",
              header = "using html put", 
              text = "icon to next line", 
              rightBorder = FALSE,
              marginBottom = FALSE
            )
          )
        )
      )
    ),
    title = "Description Blocks"
  ),
  server = function(input, output) { }
)

库（闪亮）
图书馆（shinydashboard）
shinyApp(
ui=仪表板页面(
仪表板标题（），
仪表板侧栏（），
仪表板主体(
盒子(
solidHeader=FALSE，
title=“状态摘要”，
背景=空，
宽度=4，
status=“危险”，
页脚=fluidRow(
纵队(
宽度=6，
描述块(
number=“17%”，
numberColor=“绿色”，
numberIcon=“插入符号向上”，
header=“请不要加粗”，
text=“请用小写字母设置我”，
rightBorder=TRUE，
marginBottom=FALSE
)
),
纵队(
宽度=6，
描述块(
数字=HTML（“图标？”），
numberColor=“红色”，
numberIcon=“骷髅交叉骨”，
header=“使用html放置”，
text=“下一行的图标”，
rightBorder=FALSE，
marginBottom=FALSE
)
)
)
)
),
title=“描述块”
),
服务器=函数（输入、输出）{}
)

要解决此问题，您需要插入与软件包提供的css代码同样具体的css语句

• 要删除粗体标题，请插入

  .description block>.description header{font-weight:500；}

• 要删除始终大写的insert

  .description block>.description text{text transform:none；}

• 图标问题。问题是您使用的是
  标记。默认情况下，这是一个块元素，它将下一个对象移动到新行。在这里，您可以使用不同的标记，例如
  ，或者将显示属性设置为

  内联块

  。在下面的示例中，我使用了后面的解决方案

总的来说是这样的

library(shiny)
library(shinydashboard)
shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      tags$head(
        tags$style(
HTML("
.description-block>.description-text {
    text-transform: none;
  }
.description-block>.description-header {
    font-weight: 500;
}
.description-percentage>h4 {
  display: inline-block;
}
")
        )
      ),
      box(
        solidHeader = FALSE,
        title = "Status summary",
        background = NULL,
        width = 4,
        status = "danger",
        footer = fluidRow(
          column(
            width = 6,
            descriptionBlock(
              number = "17%", 
              numberColor = "green", 
              numberIcon = "caret-up",
              header = "not bold please", 
              text = "set me in lowercase please", 
              rightBorder = TRUE,
              marginBottom = FALSE
            )
          ),
          column(
            width = 6,
            descriptionBlock(
              number = HTML("<h4>icon?</h4>"), 
              numberColor = "red", 
              numberIcon = "skull-crossbones",
              header = "using html put", 
              text = "icon to next line", 
              rightBorder = FALSE,
              marginBottom = FALSE
            )
          )
        )
      )
    ),
    title = "Description Blocks"
  ),
  server = function(input, output) { }
)

库（闪亮）
图书馆（shinydashboard）
shinyApp(
ui=仪表板页面(
仪表板标题（），
仪表板侧栏（），
仪表板主体(
标签$head(
标签$style(
HTML（“
.description block>.description text{
文本转换：无；
}
.description block>.description头{
字号：500；
}
.说明百分比>h4{
显示：内联块；
}
")
)
),
盒子(
solidHeader=FALSE，
title=“状态摘要”，
背景=空，
宽度=4，
status=“危险”，
页脚=fluidRow(
纵队(
宽度=6，
描述块(
number=“17%”，
numberColor=“绿色”，
numberIcon=“插入符号向上”，
header=“请不要加粗”，
text=“请用小写字母设置我”，
rightBorder=TRUE，
marginBottom=FALSE
)
),
纵队(
宽度=6，
描述块(
数字=HTML（“图标？”），
numberColor=“红色”，
numberIcon=“骷髅交叉骨”，
header=“使用html放置”，
text=“下一行的图标”，
rightBorder=FALSE，
marginBottom=FALSE
)
)
)
)
),
title=“描述块”
),
服务器=函数（输入、输出）{}
)

我对shinyDashboardPlus不太熟悉，但是本文应该适用于定制CSS，不管是什么包：您好，谢谢。关于图标，问题是，只要参数存储了任何

HTML（）

，图标就会转到下一行，这是我们要防止的。@yeahman269好的，我添加了我认为解决图标问题的方法。顶部答案！谢谢