如何为闪亮模块中的元素定义 CSS答案

【问题标题】：How to Define CSS for Elements inside Shiny Modules如何为闪亮模块中的元素定义 CSS
【发布时间】：2019-12-13 11:54:42
【问题描述】：

我正在尝试使用闪亮模块在 HTML 中实现以下结果：

外部闪亮模块： p标签是黑色的，当鼠标悬停在它上面时，光标应该变成指针，颜色应该变成灰色。

闪亮模块内部： p标签是蓝色的，当鼠标悬停在它上面时，光标应该变成指针，颜色应该变成红色。

HTML 版本有效： demo

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        p{color:black;}
        p:hover{color:grey;cursor:pointer;}

        #mymodule p{color:blue;}
        #mymodule p:hover{color:red;cursor:pointer;}

    </style>
</head>
<body>
    <p>text outside module</p>
    <div id='mymodule'>
        <p>text inside module</p>
    </div>
</body>
</html>
    <p>some text</p>
</body>
</html>

我尝试为模块添加 CSS，但似乎不起作用。我该怎么办？任何帮助表示赞赏，谢谢！

library(shiny)
library(glue)
library(shinyjs)

mymoduleUI <- function(id){
    ns <- NS(id)
    uiOutput(ns("text"))
}

mymodule <- function(input,output,session,color,colorHover){
    id <- session$ns("mymoduleUI")
    css_text <- glue("#{id} p{{color:{color};}}
                    #{id} p:hover{{color:{colorHover};}}")
    print(css_text)
    output$text <- renderUI({
        shinyjs::inlineCSS(rules = css_text)
        tags$p("text inside module")
    })
}


shinyApp(
    ui = basicPage(
        tags$head(tags$style("p{color:balck;}
                             p:hover{color:grey}")),
        tags$p("text outside module"),
        mymoduleUI("here")
    ),
    server = function(input, output) {
        callModule(module = mymodule,id = 'here',color="blue",colorHover="red")
    }
)

【问题讨论】：

省略shinyjs::useShinyjs()是不是因为不需要javascript交互？（?useShinyjs 确实说必须加载它“才能使所有其他 'shinyjs' 功能正常工作”。*耸耸肩*）
我删除了那行，不需要该行。谢谢。

标签： jquery html r shiny shinyjs

【解决方案1】：

出现以下错误：

正如 r2evans 所指出的，useShinyjs() 语句丢失了
使用session$ns("text") 而不是session$ns("mymoduleUI")。 uiOutput的id是'here-text'，但原版返回'here-mymoduleUI'。
如果您在创建元素的同时设置css，它将不会应用，因为到那时该元素甚至都不存在。

如果该模块有多个实例，每个实例都有不同的css，我建议将css 规则附加到head，如下所示。否则，如果只有一定数量的选项（例如：颜色：红色、蓝色、绿色），那么我会预先创建css classes，然后使用class = ...。

代码：

mymodule <- function(input,output,session,color,colorHover){
  id <- session$ns("text")

  css_text <- glue("
    $('head').append('<style type=\"text/css\">#{id} p{{color:{color}}} #{id} p:hover{{ color:{colorHover}}}</style>');
  ")
  print(css_text)
  output$text <- renderUI({
    tags$p("text inside module")
  })

  observe( {
    shinyjs::runjs(css_text)
  })
}

输出：

【讨论】：

您能否提供一个您的第二种方法的示例？