基于golem的Shiny App如何集成现有设计系统（如DSFR）

1. 给actionButton添加DSFR的fr-btn类 #

Shiny的actionButton支持通过class参数直接添加自定义CSS类，修改按钮代码即可：

actionButton("button", "Button", class = "fr-btn")

如果需要移除Shiny默认的btn类以避免样式冲突，可以用htmltools包的tagAppendAttributes替换原有类：

library(htmltools)

tagAppendAttributes(
  actionButton("button", "Button"),
  class = "fr-btn",
  .cssSelector = "button",
  .replace = TRUE  # 替换原有类
)

2. 将DSFR放入www目录并生效 #

完全可以直接把DSFR的资源文件夹放到Golem项目的inst/app/www目录下，步骤如下：

• 从DSFR仓库下载编译好的dist文件夹资源
• 在inst/app/www下创建dsfr子目录，把dist里的所有文件（包括css、js、utility等文件夹）复制进去
• 修改golem_add_external_resources()函数，引入DSFR的CSS和JS文件：

golem_add_external_resources <- function(){
  add_resource_path(
    'www', app_sys('app/www')
  )

  tags$head(
    golem::activate_js(),
    golem::favicon(),
    # 引入DSFR核心样式
    tags$link(rel = "stylesheet", href = "dsfr/dsfr.min.css"),
    # 引入DSFR核心脚本
    tags$script(src = "dsfr/dsfr.min.js"),
    # 引入图标样式（按需添加）
    tags$link(rel = "stylesheet", href = "dsfr/utility/icons/icons.min.css")
  )
}

启动App后，DSFR的样式和脚本会自动加载，配合添加了fr-btn类的按钮，就能显示DSFR风格的组件了。

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