如何为闪亮模块中的元素定义 CSS
Posted
技术标签:
【中文标题】如何为闪亮模块中的元素定义 CSS【英文标题】：How to Define CSS for Elements inside Shiny Modules 【发布时间】：2019-12-13 11:54:42 【问题描述】：我正在尝试使用闪亮模块在 html 中实现以下结果：
外部闪亮模块： p标签是黑色的，当鼠标悬停在它上面时，光标应该变成指针，颜色应该变成灰色。
闪亮模块内部： p标签是蓝色的，当鼠标悬停在它上面时，光标应该变成指针，颜色应该变成红色。
HTML 版本有效： demo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
pcolor:black;
p:hovercolor:grey;cursor:pointer;
#mymodule pcolor:blue;
#mymodule p:hovercolor: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 pcolor:color;
#id p:hovercolor:colorHover;")
print(css_text)
output$text <- renderUI(
shinyjs::inlineCSS(rules = css_text)
tags$p("text inside module")
)
shinyApp(
ui = basicPage(
tags$head(tags$style("pcolor:balck;
p:hovercolor: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' 功能正常工作”。*耸耸肩*）
我删除了那行，不需要该行。谢谢。
【参考方案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 pcolor:color #id p:hover color:colorHover</style>');
")
print(css_text)
output$text <- renderUI(
tags$p("text inside module")
)
observe(
shinyjs::runjs(css_text)
)
输出：
【讨论】：
您能否提供一个您的第二种方法的示例？以上是关于如何为闪亮模块中的元素定义 CSS的主要内容，如果未能解决你的问题，请参考以下文章