1

有一种方法可以将背景或文本颜色更改为 PrimeReact 数据表中的一行，该方法使用rowClassName={rowClass}whererowClass是一个允许返回 CSS 文件中配置的类的函数。

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

阅读de文档我看不到调用函数以返回样式字符串的方法。另一种方法可能是动态创建类名，例如...

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

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

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

谢谢！

4

1 回答 1

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" 的字段，那么它将使用此颜色创建一个样式并将其用作文本颜色。同样可以应用于背景或其他

于 2021-02-19T22:02:53.740 回答