如何消除Shiny主面板图表上方白色空白，设置自定义背景色

需求：将Shiny应用主面板背景统一设置为自定义企业色#f2f0eb，消除图表上方的白色空白区域。

以下是整合解决方案后的完整代码：

# Test App
## Packages ----
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(plyr)
library(dplyr)
library(dbplyr)
library(tidyr)
library(ggplot2)
library(scales)
library(stringr)
library(plotly)
library(ggiraph)
library(shinycssloaders)

## Header ----
header <- dashboardHeader(title = span("Test app StackOverFlow", style = "font-size: 18px"))

## Sidebar ----
sidebar <- dashboardSidebar(
  disable = FALSE,
  width = 230,
  sidebarMenu(
    tags$br(),
    textOutput("text1"),
    tags$br(),
    sidebarMenu(id="menu1",
                menuItem("Test", tabName = "PERF", icon = icon("arrow-right", verify_fa = FALSE),
                         menuSubItem('blabla',tabName = 'kpi_1'),
                         menuSubItem('blablabla',tabName = 'kpi_2'))
    )
  )
)

# Body----
body <- dashboardBody(
  # 统一设置全局样式 ----
  tags$head(tags$style(HTML('
        /* 全局背景 */
        body, .content-wrapper, .right-side {
          background-color: #f2f0eb;
        }
        
        /* Box组件样式 */
        .box {
          border-top: 0px;
          -webkit-box-shadow: none; 
          -moz-box-shadow: none;
          box-shadow: none;
          background-color: #f2f0eb;
        }
        .box .box-header {
          border: none;
        }
        
        /* 头部Logo样式 */
        .skin-blue .main-header .logo {
          background-color: #109FC6;
        }
        .skin-blue .main-header .logo:hover {
          background-color: #ce5368;
        }
        
        /* 导航栏样式 */
        .skin-blue .main-header .navbar {
          background-color: #f2f0eb;
        }
        .skin-blue .main-header .navbar .sidebar-toggle:hover {
          background-color: #ce5368;
        }
        
        /* 侧边栏样式 */
        .skin-blue .main-sidebar {
          background-color: #109FC6;
        }
        .skin-blue .main-sidebar .sidebar .sidebar-menu a {
          background-color: #109FC6;
          color: #000000;
        }
        .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover,
        .skin-blue .main-sidebar .sidebar .sidebar-menu .active a {
          background-color: #ce5368;
        }
        
        /* Tab面板样式 - 核心：消除白色空白 */
        .tab-content {
          background-color: #f2f0eb;
        }
        .tabs-above > .nav > li[class=active] > a {
          background-color: #ce5368;
          color: #fff;
        }
        .tabbable > .nav > li > a {
          background-color: #ce5368;
          color: black;
        }
      '))),
  
  # 顶部选择框 ----
  fluidRow(
    column(
      selectInput("selectclient", "Select choice:", 
                  choices = list("A" = "A1","B" = "B2","C" = "C2","D" = "D2"),
                  selected = "A"), 
      width = 2
    )
  ),

  tabItems(
    # KPI1页面 ----
    tabItem(tabName = 'kpi_1',
            box(
              shinycssloaders::withSpinner(plotlyOutput("chart_kpi1")), 
              width = 12
            )
    )
  )
)

## UI整合 ----
ui <- dashboardPage(header, sidebar, body,
                    footer = dashboardFooter(
                      left = "Developed and maintained by",
                      right = "For questions email:"
                    ))

# 服务器逻辑 ----
server <- function(input, output) {
  output$chart_kpi1 = renderPlotly({
    x <- c(1:100)
    random_y <- rnorm(100, mean = 0)
    data <- data.frame(x, random_y)
    
    plot_ly(data, x = ~x, y = ~random_y, type = 'scatter', mode = 'lines') %>% 
      layout(
        paper_bgcolor = "#f2f0eb",
        plot_bgcolor  = "#f2f0eb"
      )
  })
}

# 运行应用 ----
shinyApp(ui = ui, server = server)

关键修改说明 #

• 核心修复：新增.tab-content { background-color: #f2f0eb; }，覆盖Tab内容区域默认的白色背景，这是消除图表上方空白的关键。
• 样式统一：将分散的CSS代码整合到一个样式块中，修正了原代码中错误的CSS写法（如box-header with-border:0px），正确移除Box组件的边框和阴影。
• 图表优化：确保Plotly图表的paper_bgcolor和plot_bgcolor均设置为#f2f0eb，与全局背景统一。

内容的提问来源于stack exchange，提问作者Jelle Jansen