設置 CSS 變量從 model object 在 Z3982572505B879A8CF62684A803A0B5

Question

我在 Thymeleaf 模板的樣式標簽內設置 CSS 顏色變量。 顏色值來自 model object。 我還想應用默認顏色，以防 model 屬性不存在。

但是當我渲染模板時， Thymeleaf 不會評估表達式，而是將整個表達式分配為字符串文字，而不是顏色值。

下面是我的風格標簽。 我在 Apache Freemarker 中做過同樣的事情，而且效果很好。 我對 Thymeleaf 很陌生，我應該在這里做些什么不同的事情？

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

Answer 1

如果要設置 CSS 變量，則應使用CSS 內聯。

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

通常 Thymeleaf 處理器只計算標簽的th:*屬性中的表達式。 但是，如果您在樣式標簽上設置th:inline="css"您可以使用[[...]]表達式來評估標簽內的文本。