使用 CSS 设置样式时如何引用变量的值？

Question

上下文

我正在 Shiny 中开发一个可重用的模块，并希望让用户可以更改此模块中 id 的值，因此：我不知道模块有。

我还想使用一些自定义 CSS 来设置这些元素的样式，并希望将 CSS 代码放在单独的文件中（在 www/ 文件夹中）。

问题

我预计提到的 id（命名空间）会出现问题 - 我不确定如何在另一种语言（CSS) 在不同文件中工作时。

我知道可以使用 internal 样式表来引用该值：

library(shiny)
library(glue)

modUI <- function(id) {
  ns <- NS(id)
  tagList(
  tags$head(tags$style(glue("#{id}-color {{background-color: green;}}"))),
  actionButton(ns("color"), "I'm green")
  )
}

modServer <- function(id) {
  moduleServer(
    id,
    function(input, output, session) {
      
    }
  )
}

ui <- fluidPage(
  modUI("example")
)

server <- function(input, output, session) {
  modServer("example")
}

shinyApp(ui, server)

但是否可以对外部样式表做同样的事情？

我想补充一点，我是使用非 R 工具（CSS、Saas）和 R 工具（bslib、fresh）进行样式设计的初学者，所以也许我只是遗漏了一些东西非常基本。我还想补充一点 - 即使我已经提到 CSS - 如果适合在可重用模块中使用，我可以使用不同的东西。

Answer 1

您可以使用 css class 而不是按 id 设置元素样式，这意味着用户输入的 id 无关紧要。

my_module_ui <- function(id) {
  ns <- NS(id)
  tagList(
    tags$head(tags$style(".my_module_button {background-color: green;}")),
    actionButton(ns("color"), "I'm green", class = "my_module_button")
  )
}

这可以很容易地移植到外部样式表中，其他用户可以覆盖 class 样式。

.my_module_button {
  background-color: green;
}

一般来说，在 css 世界中更常见的是使用 classes 而不是 ids 到 select 样式目标，即使样式仅应用于一个单个元素。

只需确保您的 class 名称足够具体以避免 class 名称冲突。我建议您使用模块名称作为与模块对应的 css classes 的前缀。您的模块的样式表将如下所示

.my_module_button {
  background-color: green;
}

.my_module_text {
  color: teal;
}

.my_module_container {
  margin: 0 auto;
}

还有复合 select 的高级技术，但根据我的经验，每个模块有一些命名空间 css classes 通常可以完成工作。

使用 CSS 设置样式时如何引用变量的值？

How to refer to the value of variable when styling using CSS?

css

r

shiny