css - 如何在Liferay中的Vaadin portlet中管理样式

我有一个Portlet，其中使用了Valo主题。大多数图形组件都可以正确显示，但TextField不能正确显示。它的边框半径应为圆形，高度应为35px。它通常约为15像素，并且该字段是有角度的。
当我将浏览器窗口的宽度缩小到大约200px时，TextField突然具有适当的高度。
我可以在源代码中显式更改高度以使用方法... setHeight，但是如何使用样式进行管理呢？
我将tests-valo主题复制到了VAADIN / themes中，但是我仍然不知道如何更改文本字段的外观。似乎没有任何反应。
即使是非常简单的颜色更改也会影响其他组件，但不会影响TextField。
即

((ComboBox) testComb).addStyleName("color2");

有效果。

((TextField) testField).addStyleName("color2");

没有效果。

示例中的重新键入已过时，并且为了清楚起见而使用。

最佳答案

我发现解决方案不是很完美，但对于我的目的来说仍然足够：

1.按照http://www.rapidpm.org/2014/05/25/vaadin-valo--the-new-theme-%28since-vers.html上的说明从vadin-themes-7.0.5..jar复制Valo主题
 2.在valo根主题中编辑styles.css。
 3.将.important子句添加到.valo .v-textfield {..}类定义中，如在http://www.liferay.com/community/forums/-/message_boards/message/15001322上写的关于边框半径和高度。它更改外观的优先级。

即

    .valo .v-textfield {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    margin: 0;
    font: inherit;

    font-weight: 400;
    line-height: normal;
    height: 37px !important;
    border-radius: 4px !important;
    padding: 4px 9px;
    border: 1px solid #c5c5c5;
    background: white;
    color: #474747;
    -webkit-box-shadow: inset 0 1px 0 #f7f7f7, 0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 #f7f7f7, 0 1px 0 rgba(255, 255, 255, 0.1);
    -webkit-transition: box-shadow 180ms, border 180ms;
    -moz-transition: box-shadow 180ms, border 180ms;
    transition: box-shadow 180ms, border 180ms;
    width: 185px;
}

就这样。外观是所需的。