Question

在我的申请中，我有两个Vaadin网格。我想将默认CSS应用于一个网格，将用户定义的CSS应用于另一个网格。当我将用户定义的CSS应用于其他网格时，默认CSS主导着用户定义的CSS。这是我的代码。在styles.scss，

.my-grid-style{
    line-height: 64px !important;
   font-size: 12px !important;
   text-align: center !important;
}

在我的应用程序.java文件中，我使用setStyleName，如下所示

grid.setStyleName("my-grid-style");

但是这个CSS由默认的.v-grid-cell样式支配。任何人都可以建议如何实现相同的目标？

Answer 1

尝试

.my-grid-style {
  .v-grid-cell {
    //your styles
  }
}

Answer 2

我认为你的风格不是添加到样式。因为默认的CSS不能支配“！important”
尝试以编程方式添加：

UI.getCurrent().getPage().getStyles().add(".my-grid-style{\n" +
                                          "    line-height: 64px !important;\n" +
                                          "   font-size: 12px !important;\n" +
                                          "   text-align: center !important;\n" +
                                          "}");

然后

grid.setStyleName("my-grid-style");

Answer 3

这对我有用（不确定你是否需要.v-grid-body ollitietavainen没有使用它，但它对编辑等其他功能可能很重要）

UI.getCurrent().getPage().getStyles().add(
    ".my-grid-style .v-grid-body .v-grid-cell {\n" +"" +
    "     line-height: 18px;\n" + 
    "     font-size: 12px;\n" + 
    "}");

然后使用utrucceh

讨论的样式

grid.setStyleName("my-grid-style");

如果以下“内置插件”中的一个像Table组件那样工作，那肯定会很好：

grid.addStyleName(ValoTheme.TABLE_COMPACT); // "compact"
grid.addStyleName(ValoTheme.TABLE_SMALL); // "small"

在Vaadin 7中将用户定义的CSS应用于网格

3 个答案: