javascript - 根据数据库中的值动态设置背景颜色

Question

db 存储十六进制值，然后将用于设置 div 的背景颜色。

如何将来自 DB 的值传递给 css 类？

编号| page_category| 颜色

1 | 美国广播公司 | 38963c

2 | XYZ | 269蜜蜂

JS

pageCategories.map((category, i) => {
 <div className={`pp_color`} />
}

CSS

 .pp_color1 {
    background:???;
  }

标签： javascriptcssreactjs

Answer 1

您的解决方案会起作用，但您必须提前了解所有颜色，然后构建所有 css 类以在您的 JS 中引用。

如果您想要一个动态解决方案并且如果您乐于使用CSS 变量，您可以将背景颜色设置为变量，然后使用 Javascript 使用您的十六进制值更改它，就像这样。

CSS

  :root {
      --main-bg-color: brown;
  }

JS

  const dbValues = {
    'main-bg-color': '#00ff00'
  }

  Object.entries(dbValues).map(([key, value]) => {
    document.documentElement.style.setProperty(`--${key}`, value)
  })

只是提醒一下，CSS 变量不受完全支持，但如果有帮助的话，有一个css-vars-ponyfill。

最后一点。您还可以动态更改元素范围内的变量，而不会影响全局类。更多信息在这里