Vaadin 8：自定义按钮颜色

Question

我想从“瓦洛友好”按钮改变绿色，但我失败了。 我按照 Vaadin Upload Button, CSS to change its color (same styles as Button)? 中的描述做了，但我想我错过了一些东西。

从styles.css中我复制了

.mytheme .v-button-friendly { 
height: 37px; 
padding: 0 16px; 
color: #eaf4e9; 
font-weight: 400; 


border-radius: 4px; 
border: 1px solid #227719; 
border-top-color: #257d1a; 
border-bottom-color: #1e6b15; 
background-color: #2c9720; 
background-image: -webkit-linear-gradient(top, #2f9f22 2%, #26881b 98%); 
background-image: linear-gradient(to bottom,#2f9f22 2%, #26881b 98%); 
-webkit-box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05); 
box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05); 
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05); 
} 

到mytheme.scss，只是改变了颜色。 mytheme.scss现在看起来如下：

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

@mixin mytheme { 
    @include valo; 

.v-button-sgcgreen { 
height: 37px; 
padding: 0 16px; 
color: #006666; 
font-weight: 400; 


border-radius: 4px; 
border: 1px solid #227719; 
border-top-color: #257d1a; 
border-bottom-color: #1e6b15; 
background-color: #006666; 
background-image: -webkit-linear-gradient(top, #2f9f22 2%, #26881b 98%); 
background-image: linear-gradient(to bottom,#2f9f22 2%, #26881b 98%); 
-webkit-box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05); 
box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05); 
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05); 
} 
} 

并且它被添加到styles.css的文件的末尾作为 .mytheme .V-按钮sgcgreen {....}

我设置按钮的样式为

Button showAllProbesBtn = new Button("Show all"); 
showAllProbesBtn.addStyleName("sgcgreen"); 

但按钮是默认的灰色，并且没有指定的颜色。

我错过了什么？ 谢谢你的帮助！

编辑：

看来我所做的是正确的，但没有直接显示。虽然我做了Maven clean多次安装并重新启动Tomcat，但只有在我开始更改代码中的其他内容后，才出现正确的颜色。

缓存的样式在哪里？在Eclipse和Chrome中立即查看样式更改需要做些什么？

Answer 1

我建议您更改Valo变量v-friendly-color（请参阅Valo theme doc）。例如mytheme.scss：

// overwrite Valo variables 
$v-friendly-color: #0000F0; 

// Import valo after setting the parameters 
@import "../valo/valo"; 

@mixin goidentity { 
    @include valo; 
} 

的Valo的主题，然后将带您设定的颜色。不需要混淆CSS样式。但是，我不知道这个颜色变量是否在主题的其他地方使用。所以这可能会影响其他样式，而不仅仅是友好按钮。