Vaadin：识别 HTML 添加的 CSS 类

Question

在 Vaadin 中，我将 HTML 写入 RichTextArea，如下所示：

Java：

RichTextArea area = new RichTextArea();

StringBuffer buf = new StringBuffer();
buf.append("<h1 class=\"previewPerson;\" style=\"text-align: right;\">" +
profile.getPersonName() + "</h1>\n");

//...

area.setValue(buf.toString());

SCSS (mystyle.scss):

.previewPerson {
color: $v-focus-color;
font: $v-font-family;
}

“previewPerson”类在styles.css中显示为

.mystyle .previewPerson {
color: red;
font: Comic Sans;
}

...班级出现在我的检查员中，但没有任何效果。内联样式确实有效果。

如果可能，我希望在我的 .scss 文件中识别这种样式，因为我不想在我的 StringBuffer 中编写内部样式。我已尝试addStyleName("previewPerson")，但无法使其正常工作。

Answer 1

尝试在addStylename("previewPerson") 再次破解。你需要做的是将组件的样式名称添加到scss类中。

所以你的 Java 应该是这样的：

RichTextArea area = new RichTextArea();
area.addStyleName("previewPerson");    
area.setValue(profile.getPersonName());

你的 SCSS 是这样的：

.v-richtextarea-previewPerson {
   text-align: right;
   color: $v-focus-color;
   font: $v-font-family;
}

另外，请注意 RichTextArea，因为您可能允许跨站点脚本。确保您的用户输入是properly sanitized。