css - 从 Thymeleaf 中的模型对象设置 CSS 变量

Question

我正在 Thymeleaf 模板的样式标签内设置 CSS 颜色变量。颜色值来自模型对象。我还想应用默认颜色，以防模型属性不存在。

但是当我渲染模板时，Thymeleaf 不会计算表达式，而是将整个表达式指定为字符串文字，而不是颜色值。

下面是我的风格标签。我在 Apache Freemarker 中做了同样的事情，而且效果很好。我对 Thymeleaf 还很陌生，我应该做什么不同的事情？

<style>
  :root {
    --primary-color: ${brandingConfig?.themeConfig?.primaryColor} ?: '#633EA5';
    --secondary-color: ${brandingConfig?.themeConfig?.secondaryColor} ?: '#E9E6ED';
  }
</style>

Answer 1

如果你想设置CSS变量，你应该使用CSS inlining .

<style th:inline="css">
  :root {
    --primary-color: [(${brandingConfig?.themeConfig?.primaryColor} ?: '#633EA5')];
    --secondary-color: [(${brandingConfig?.themeConfig?.secondaryColor} ?: '#E9E6ED')];
  }
</style>

通常，Thymeleaf 处理器仅计算标签的 th:* 属性中的表达式。但是，如果您在样式标记上设置 th:inline="css"，则可以使用 [[...]] 表达式来计算标记内的文本。