Shiny.fluent框架下卡片颜色自定义失败，寻求解决方案

使用Shiny.fluent框架开发应用时，无法修改Card（卡片）的颜色。由于该框架会覆盖Bootstrap样式，我尝试了自定义Card函数、内联CSS、外部CSS等多种方式均未成功。目前找不到针对Card或GridItem自定义样式的相关教程，作为Fluent UI和Shiny.fluent新手，请求解决方法。

我已尝试的具体方式：

1. Server端添加样式：

# create a reactive to sum totals and return for range within chosen dates
output$total <- renderText({
  div(
    class = "ms-fontWeight-bold bg-primary",
    data <- data(),
    sum <- data %>% group_by('Total Generation') %>% 
      summarise(Sum_Total_Gen = sum('Total Generation'))
)

2. UI内联样式：

GridItem(class = "bg-primary ms-sm12 ms-xl4",
     Card(title = "Date Filter", filters(),
          div()
     )
)

3. UI中添加tag$style：

ui <- fluentPage(
  tag$style(
    div{
      color:red;
    }
  ),
  Grid(

4. 链接外部样式表：

ui <- fluentPage(
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "styles.css")
  ),
  Grid(
    GridItem(class = "ms-sm12 ms-xl8",

5. 自定义Card函数：

Card <- function(..., title = NULL){
  Stack(
    class = "ms-depth-6",
    style = "color:red;",
    tokens = list(padding = 10,childrenGap = 10),
    if(!is.null(title)) Text(title, variant= "medium"),...
  )
}

解决方案 #

方法1：用Fluent UI官方styles参数（推荐） #

Shiny.fluent基于Fluent UI React，组件原生支持styles参数传入样式对象，优先级高于普通CSS，不会被框架默认样式覆盖。修改你的自定义Card函数：

Card <- function(..., title = NULL){
  Stack(
    class = "ms-depth-6",
    # 通过styles定义组件根元素样式
    styles = list(
      root = list(
        backgroundColor = "#f0f5ff", # 替换为目标背景色
        color = "red", # 文字颜色
        padding = "10px",
        gap = "10px"
      )
    ),
    if(!is.null(title)) Text(title, variant= "medium"),
    ...
  )
}

方法2：高优先级CSS选择器 #

如果要用外部CSS或tag$style，需要针对Fluent UI生成的DOM类名写更具体的选择器，配合!important强制覆盖：

ui <- fluentPage(
  tag$style(HTML("
    /* 自定义Card的Stack组件样式 */
    .ms-Stack.ms-depth-6 {
      background-color: #f0f5ff !important;
      color: red !important;
    }
    /* GridItem自定义样式 */
    .ms-GridItem.bg-primary {
      background-color: #e6f7ff !important;
    }
  ")),
  Grid(
    GridItem(class = "ms-sm12 ms-xl4",
             Card(title = "Date Filter", filters())
    )
  )
)

方法3：修正Server端代码错误 #

Server端renderText仅返回文本，不能嵌套数据处理逻辑，改用renderUI，同时注意R中带空格的列名要用反引号：

output$total <- renderUI({
  data <- data()
  sum_total <- data %>% 
    group_by(`Total Generation`) %>% 
    summarise(Sum_Total_Gen = sum(`Total Generation`))
  
  div(
    class = "ms-fontWeight-bold bg-primary",
    paste0("总发电量: ", sum_total$Sum_Total_Gen)
  )
})

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