为R Shiny的SidebarPanel和MainPanel添加黑色边框

要让你的Shiny应用里的侧边栏和主面板更突出，添加黑色边框是个很棒的选择！我们可以通过自定义CSS样式直接实现，不需要额外的外部文件，把样式嵌入UI代码里就好。

修改后的完整UI代码 #

library(shiny)
library(shinyalert)

# Define UI for application that draws a histogram
shinyUI(fluidPage(
    # 插入自定义CSS，给面板添加黑色边框
    tags$style(HTML("
        .sidebar-panel {
            border: 2px solid black; /* 黑色实线边框，粗细可调整 */
            padding: 12px; /* 可选：增加内边距，避免内容紧贴边框 */
            border-radius: 4px; /* 可选：给边框加圆角，优化视觉效果 */
        }
        
        .main-panel {
            border: 2px solid black;
            padding: 12px;
            border-radius: 4px;
        }
    ")),

    # Application title
    titlePanel("Old Faithful Geyser Data"),

    # Sidebar with a slider input for number of bins
    sidebarLayout(
        sidebarPanel(
            # 这里可以添加你的输入控件
        ),

        # Show a plot of the generated distribution
        mainPanel(
          DT::dataTableOutput("cap_table")
        )
    )
))

Server代码（无需修改） #

library(shiny)
library(shinyalert)

data <- data.frame(x=rnorm(10),y=rnorm(10))

# Define server logic required to draw a histogram
shinyServer(function(input, output) {
  # render data selection
  output$cap_table <- DT::renderDataTable(data)
})

小提示 #

• 你可以自由调整边框样式：比如把2px改成3px加粗边框，把solid换成dashed/dotted变成虚线/点线边框
• padding属性是可选的，如果不需要内边距可以直接删掉
• 这个样式会和你已经设置的应用背景色完美适配，让面板的辨识度大幅提升

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