设置网格边框（Vaadin 7.4.9）

Question

我需要为网格中的列添加边框。

在我的webapp中，我有addons.scss，mytheme.scss，styles.scss和styles.css。我如何将这个新边框添加到我的网格中？

我的网格代码 -

@覆盖     protected void init（VaadinRequest vaadinRequest）{

Grid grid = new Grid();
IndexedContainer container = new IndexedContainer();
grid.setContainerDataSource(container);
container.addContainerProperty("September", String.class, null);
container.addContainerProperty("Person1", Integer.class, 0);
container.addContainerProperty("Person2", Integer.class, 0);
container.addContainerProperty("Person3", Integer.class, 0);
container.addContainerProperty("Person4", Integer.class, 0);
container.addContainerProperty("Person5", Integer.class, 0);
container.addContainerProperty("Person6", Integer.class, 0);
container.addContainerProperty("Person7", Integer.class, 0);
container.addContainerProperty("Person8", Integer.class, 0);

Grid.HeaderRow row = grid.addHeaderRowAt(0);
Grid.HeaderRow row2 = grid.addHeaderRowAt(1);

String[] Group1 = {"Person3", "Person4", "Person1", "Person2"};
String[] Group2 = {"Person7", "Person8", "Person5", "Person6"};      
String[] Group3 = {"Person3", "Person4"};    
String[] Group4 = {"Person1", "Person2"};    
String[] Group5 = {"Person7", "Person8"};    
String[] Group6 = {"Person5", "Person6"};    

row.join(Group1).setText("Čerpacia stanica");
row.join(Group2).setText("Panos");

row2.join(Group3).setText("TPP");
row2.join(Group4).setText("Brigada");
row2.join(Group5).setText("TPP");
row2.join(Group6).setText("Brigada");

container.addItem(1);

Item item = container.getItem(1);
item.getItemProperty("September").setValue("1.9.2017 Piatok");
...


 //This is from your post
 grid.setCellStyleGenerator(new Grid.CellStyleGenerator() {
    @Override
    public String getStyle(Grid.CellReference cellReference) {
       if ("TPP".equals(cellReference.getPropertyId()) || 
           "Brigáda".equals(cellReference.getPropertyId())) {
            return "right-and-left-border";
       else {
            return null;
        }
    }
});
}

我的webapp文件夹中有类。

Mytheme.scss

// If you edit this file you need to compile the theme. See README.md for details.

// Global variable overrides. Must be declared before importing Valo.

// Defines the plaintext font size, weight and family. Font size affects general component sizing.
//$v-font-size: 16px;
//$v-font-weight: 300;
//$v-font-family: "Open Sans", sans-serif;

// Defines the border used by all components.
//$v-border: 1px solid (v-shade 0.7);
//$v-border-radius: 4px;

// Affects the color of some component elements, e.g Button, Panel title, etc
//$v-background-color: hsl(210, 0%, 98%);
// Affects the color of content areas, e.g  Panel and Window content, TextField input etc
//$v-app-background-color: $v-background-color;

// Affects the visual appearance of all components
//$v-gradient: v-linear 8%;
//$v-bevel-depth: 30%;
//$v-shadow-opacity: 5%;

// Defines colors for indicating status (focus, success, failure)
//$v-focus-color: valo-focus-color(); // Calculates a suitable color automatically
//$v-friendly-color: #2c9720;
//$v-error-indicator-color: #ed473b;

// For more information, see: https://vaadin.com/book/-/page/themes.valo.html
// Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples

@import "../valo/valo.scss";

@mixin mytheme {

  @include valo;

.mytheme .v-grid-cell
{

    font-size: 5px;
    overflow: visible;

}

 //I insert this code here
.v-grid-cell.right-and-left-border {
 border-left: solid 2px black;
 border-right: solid 2px black;
 }

  // Insert your own theme rules here
}

来自styles.scss的代码

@import "mytheme.scss";
@import "addons.scss";

// This file prefixes all rules with the theme name to avoid causing conflicts with other themes.
// The actual styles should be defined in mytheme.scss

.mytheme {

  @include addons;
  @include mytheme;

}

这是类addons.scss

/* This file is automatically managed and will be overwritten from time to time. */
/* Do not manually edit this file. */

/* Import and include this mixin into your project theme to include the addon themes */
@mixin addons {
}

而styles.css有13000行...

将代码插入到我的java代码中的mytheme.scss和网格集样式方法后，我重新编译了该项目。但是当我刷新页面时，一切都是一样的。

- 现在我想在我的主题中更新一些样式。 E.G

.mytheme .v-grid-row > td, .mytheme .v-grid-editor-cells > div {

    font-size: 15px;
    border-left: 1px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
}

我希望有一些新款式

.mytheme .v-grid-row > td, .mytheme .v-grid-editor-cells > div {
    text-align: center;
    font-weight: bold;
    font-size: 10px;
    border-left: 1px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
}

我在哪里保存？再次感谢：）