将fluidRow样式从ui.R移动到www/styles.css

我有5个按钮，我想使用css一次控制所有按钮，而不是调用#button1、#button2、#button3

当我在css文件中进行更改时，所有按钮都将依赖于“main”类

或者，如果我只想一次性控制fluidrow1或fluidrow2的按钮，该怎么办

请参见下面的我的代码：

用户界面

Shinny.css（位于“www”文件夹中，现在仅控制按钮1）

---

您可以使用

…

参数为按钮提供自己的类：

shinyUI（fluidPage（theme=“shinny.css”，
标签$head(
标签$link（rel=“stylesheet”，type=“text/css”，href=“shinny.css”）
),
fluidRow（id=“fluidrow1”，
列（6，actionButton（inputId=“button1”，label=“Button 1”，class=“mybuttons”），
列（6，actionButton（inputId=“button2”，label=“Button 2”，class=“mybuttons”））
),
fluidRow（id=“fluidrow2”，
列（6，actionButton（inputId=“button3”，label=“Button 3”，class=“mybuttons”），
列（6，actionButton（inputId=“button4”，label=“Button 4”，class=“mybuttons”））
),
操作按钮（inputId=“button5”，label=“Button 5”，class=“mybuttons”）
)
)

然后在css中访问它们，如下所示：

.mybuttons{
背景色：#07364E；
颜色：#FFFFFF；
字号：12号；
文本对齐：居中；
宽度：90px
}

要仅访问fluidrow1中的参数，我首先将第一个

fluidRow（）

的参数从

class=“fluidrow1”

更改为

id=“fluidrow1”

。然后，您可以通过以下方式访问它们：

#fluidrow1.mybuttons{
背景色：#07364E；
颜色：#FFFFFF；
字号：12号；
文本对齐：居中；
宽度：90px
}

如果要设置UI中任何类型的所有按钮的样式，也可以使用按钮的内置类：

>操作按钮（inputId=“测试”，label=“测试标签”）
测试标签

根据上面的输出，您可以看到

btn

、

btn default

和

action button

都是每次调用

actionButton（）

时附带的类。您还可以修改这些（我选择了

操作按钮作为示例）：

.action按钮{
背景色：#07364E；
颜色：#FFFFFF；
字号：12号；
文本对齐：居中；
宽度：90px
}

尽管我会小心处理这个问题，因为您不知道在您不知情的情况下这个类还会出现在哪里，而您完全控制自己的类的使用（
.mybuttons
，在上面的示例中）

shinyUI(fluidPage(theme = "shiny.css",
              tags$head(
                tags$link(rel = "stylesheet", type = "text/css", href = "shiny.css")
              ),

  fluidRow(class = "fluidrow1",
           column(6, actionButton(inputId = "button1", label = "Button 1")),
           column(6, actionButton(inputId = "button2", label = "Button 2"))
           ),
  fluidRow(id = "fluidrow2",
           column(6, actionButton(inputId = "button3", label = "Button 3")),
           column(6, actionButton(inputId = "button4", label = "Button 4"))
           ),
  actionButton(inputId = "button5", label = "Button 5")

  )
)

#button1 {
  background-color:#07364E;
  color: #FFFFFF;
  font-size:12pt;
  text-align: center;
  width:90px
}