更容易识别 R Shiny Apps 中的 css 选择器答案

【问题标题】：More easily identify css selectors in R Shiny Apps更容易识别 R Shiny Apps 中的 css 选择器
【发布时间】：2020-05-30 21:28:24
【问题描述】：

我正在构建一些 Shiny 应用程序，并且我选择了完全自定义的 CSS 样式表（而不是使用预定义的模板）。

我花了太多时间在 css 样式表中反复试验，试图确定哪些选择器控制着 Shiny 应用程序的哪个方面。

我学会了使用谷歌浏览器的检查功能来查看后台代码，但仍然不知道什么是复制/适应。

有人可以通过与 R 中的 css 和 Shiny 相关的工作流程为我指明正确的方向吗？

谢谢

【问题讨论】：

bootstraplib 可能是简化 Shiny 应用程序设计的一个很好的解决方案，但我认为它还没有完成。您还可以通过创建基于 SASS 的 .scss 文件来简化您的 .css 文件。有一个 R 包可以将 .scss 文件转换为 .css 文件。有关更多信息，请参阅here。这两种方法都有详细说明here。否则，我想有效地使用 CSS 只是需要时间

标签： css r shiny

【解决方案1】：

这并不能直接回答您的问题，但是当您创建闪亮的应用程序时，您可以将每个对象包装在一个 div 中并为每个对象指定一个类。这样，您就可以通过定义的类为您想要的对象编写 css 代码，而不是使用预定义的样式。

例如，您可以将数据表包装在 class= 'table' 中并操作表格的组件，甚至使用边框、阴影和边框半径在其周围创建一个“框”。

tags$div(class = 'table', DT::dataTableOutput(ns("your_table")))

css:

.table{
box-shadow: 0 5px 5px hsla(0,0%,0%,.2), inset 0 5px 0 var(--tab_color);
border-radius: 5px;
border-color: var(--bg-border);
background-color: var(--bg-dark);

padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
margin-top: 20px;
margin-left:10px;
margin-right: 10px;
margin-bottom: 30px;
}

【讨论】：