材质表 rowStyle 背景颜色根据

大佬教程收集整理的这篇文章主要介绍了材质表 rowStyle 背景颜色根据，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决材质表 rowStyle 背景颜色根据？

我正在尝试根据优先级编号更改行的颜色。例如，如果优先级为 4，则整行的颜色应为蓝色。问题是我不确定如何实现这一目标。我知道材料表为行分配 ID，但我无法访问它们。以下是我到目前为止所提出的。我需要根据优先级编号设置 options[BACkgroundcolor]。我这里也有一个代码箱https://codesandbox.io/s/notifications-material-ui-spq45

import React from "react";
import { Container } from "react-bootstrap";
import Materialtable from "material-table";
import FilterListIcon from "@material-ui/icons/FilterList";
import SearchIcon from "@material-ui/icons/Search";
import FirstPage from "@material-ui/icons/FirstPage";
import LastPage from "@material-ui/icons/LastPage";
import Chevronleft from "@material-ui/icons/Chevronleft";
import ChevronRight from "@material-ui/icons/ChevronRight";
import CloseIcon from "@material-ui/icons/Close";

function App() {

  //loop through the array of priority numbers,and display color based on number
  
  function colors(num) {

    for(let i = 0; i < num.length; i++) {
    if (num[i] === 4) {
      options.rowStyle.BACkgroundcolor = "blue";
    }

    if (num[i] === 3) {
      options.rowStyle.BACkgroundcolor = "red";
    }

    console.log(num[i]);
  }
}

  let data = [
    {
      date: "06-29-2021",subject: "CANBUS LOSS,automatic Reboot!",message:
        "SCMS CANBUS LOSS for more than 15 min,automatic System Reboot!",category: "System",priority: 4,error: "SYS0080"
    },{
      date: "06-28-2021",subject: "Reboot!",message: "automatic System Reboot!",category: "Alarm",priority: 3,error: "SYS0090"
    },{
      date: "06-25-2021",subject: "TesTing!",message: "Generator not running!",category: "Generator",priority: 2,error: "SYS0050"
    }
  ];

  let columns = [
    { title: "Date",fIEld: "date" },{ title: "Subject",fIEld: "subject" },{ title: "message",fIEld: "message" },{ title: "category",fIEld: "category" },{ title: "Priority Level",fIEld: "priority" },{ title: "Error Code",fIEld: "error" }
  ];

  let options = {
    filtering: false,sorTing: true,rowStyle: {
    FontFamily: "Mulish-Regular",BACkgroundcolor: ""
    
    
       
     
    },headerStyle: {
      FontFamily: "Mulish-Regular",FontSize: "1.1em",FontWeight: "600",BACkgroundcolor: "#D1D1D8"
    },searchFIEldStyle: {
      FontFamily: "Mulish-Regular"
    }
  };
// Loop through all the data and find the priority number,and put it in an array

  let map = data.map((X) => x.priority);
  console.log(map);
  colors(map);

  return (
    <>
      <Container>
        <Materialtable
          title=""
          columns={columns}
          data={data}
          options={options}
          icons={{
            Filter: (props) => <FilterListIcon style={{ fill: "#2D3155 " }} />,Search: (props) => <SearchIcon style={{ fill: "#2D3155 " }} />,FirstPage: (props) => <FirstPage style={{ fill: "#2D3155 " }} />,LastPage: (props) => <LastPage style={{ fill: "#2D3155 " }} />,NextPage: (props) => <ChevronRight style={{ fill: "#2D3155 " }} />,PrevIoUsPage: (props) => (
              <Chevronleft style={{ fill: "#2D3155 " }} />
            ),SortArrow: (props) => (
              <FilterListIcon
                style={{ fill: "#2D3155 ",FontSize: "1.4em",margin: ".4em" }}
              />
            ),resetSearch: (props) => <CloseIcon style={{ fill: "#2D3155 " }} />
          }}
        />
      </Container>
    </>
  );
}

export default App;

解决方法

const rowBACkgroundColors = {
  "2": "yellow",// just for example,remove it if you don't need
  "3": "orange","4": "red",};

const options = {
  // ...
  rowStyle: (rowData) => {
    return {
      fontFamily: "Mulish-Regular",BACkgroundColor: rowBACkgroundColors[rowData.priority] ?? "#fff",};
  },// ...
};

大佬总结

以上是大佬教程为你收集整理的材质表 rowStyle 背景颜色根据全部内容，希望文章能够帮你解决材质表 rowStyle 背景颜色根据所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。