为 PrimeReact 数据表自定义颜色

Question

有一种方法可以将背景或文本颜色更改为使用 rowClassName={rowClass} 的 PrimeReact 数据表中的一行，其中 rowClass 是一个允许 returning a class 在 CSS 文件中配置。

但是...如果我想选择任意颜色怎么办？例如，以 #RRGGBB 格式从数据库中提取一个？

阅读文档我看不到调用函数以 return 样式字符串的方法。另一种方法是动态创建 class 名称，例如...

class RRGGBB 对于选定的颜色，用背景定义此 class：#RRGGBB 并让 rowClassName={rowClass} 调用 rowClass 函数 returning这是动态创建的 class...

我有这个方法，但不起作用：

const mycolor = "#00ff00";

function createStyle() {
  const style = document.createElement("style");

  // add CSS styles
  style.innerHTML = `
  .lulu {
            color: white;
            background-color: ${mycolor};
        }
    `;

  // append the style to the DOM in <head> section
  document.head.appendChild(style);
}

createStyle();

  const rowClass = (data) => {
    return {
      "lulu": data.category === "Accessories"
    };
  };
.....
        <DataTable value={products} rowClassName={rowClass}>

此代码是 prime react 示例代码的修改版本，此处在沙箱中： https://codesandbox.io/s/o6k1n

谢谢！

Answer 1

我已经解决了...

我做的是创建动态css，然后使用它：

function createStyle(color) {
    var style = document.getElementsByTagName("style");
    var colortag = color.replace("#", "mycolor");
    //Assuming there is a style section in the head
    var pos = style[0].innerHTML.indexOf(colortag);    
    if(pos<0)
        style[1].innerHTML += "."+colortag+`
    {
            color: ${color}!important;
        }
    `;
    return colortag;

const rowClass = (data) => {
    var colortag;
    if (data.COLOR!=undefined)
        colortag=createStyle(data.COLOR);
    return { [colortag]: ata.COLOR!=undefined };
}

<DataTable  ref={dt} value={Data} rowClassName={rowClass}>
    <column>......</column>

</DataTable>

使用这段代码，如果数据中有一个名为 COLOR:"#RRGGBB" 的字段，那么它将创建一个具有这种颜色的样式并将其用作文本颜色。同样可以应用于背景或其他任何东西

为 PrimeReact 数据表自定义颜色

Customizing colors for PrimeReact datatable

datatable

primereact