java - 在 Vaadin 中，如何在 Label 中设置样式而不影响整个页面

Question

例如，我在我的 Label 中设置了以下 html 代码:

Label label = new Label();
label.setContentMode(ContentMode.HTML);
label.setValue("<style> * { font-size: 12px; font-family: Arial; } </style> hello world");

上述代码的问题在于它将整个页面设置为 Arial 而不仅仅是 Label。如果我使用 RichTextArea，那么它只会将样式设置为该组件，但无论出于何种原因，Label 中定义的任何 css 样式都会应用于整个页面...

仅供引用 - 如果您将 RichTextArea 设置为只读，您会遇到完全相同的问题...

Answer 1

而不是添加内联样式。使用挂起 Vaadin 组件的 addStyleName 方法。

示例

Java:

Label label = new Label();
label.addStyleName("my-custom-style");

CSS:

.my-custom-style {
    font-size: 12px:
    font-family: Arial;
}

包括自定义样式表。

• 将 @StyleSheet("my-style-sheet.css") 添加到您的类/UI 的顶部
• 在相同包结构下的资源文件夹中创建 CSS 文件。

编辑:

因为这是在生成的报告中使用的，所以您不能使用上述解决方案:

而不是像您那样使用样式标签。如果将文本包装在 span 标记中，则可以使用内联样式将其专门应用于该标签:

label.setValue("<span style=\"font-size: 12px; font-family: Arial;\">Your text here</span>");

注意:请注意使用方法。您正在向潜在的 HTML 注入(inject)敞开大门，需要采取一些措施来防止这种情况发生。