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

Question

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

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

生效。

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

没有效果。

示例中的重新输入已过时，它是为了清楚起见而使用的。

Answer 1

我找到了解决方案，虽然不完美，但足以满足我的目的：

1.Copy 来自 vaadin-themes-7.0.5..jar 的 Valo 主题，如 http://www.rapidpm.org/2014/05/25/vaadin-valo--the-new-theme-%28since-vers.html 中所述 2. 在 valo root 主题中编辑 styles.css。 3. 将 !important 子句添加到 .valo .v-textfield {..} class 定义中，如 http://www.liferay.com/community/forums/-/message_boards/message/15001322 上所写的 border-radius 和 height。它改变了出现的优先级。

即

    .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;
}

就是这样。外观如愿。

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

How manage styles in Vaadin portlet in Liferay

css

portlet

liferay

vaadin