MUI V4：如何使用条件行着色

Question

我有一个基本的 Material UI v4 数据网格。我正在尝试将 16 的任何行更改age为全灰色color: 'grey'。我正在努力做到这一点。该文档对于如何更改整行字体颜色不是很清楚。这是代码。

import * as React from "react";
import { DataGrid } from "@material-ui/data-grid";

const columns = [
  { field: "id", headerName: "ID", width: 70 },
  { field: "firstName", headerName: "First name", width: 130 },
  { field: "lastName", headerName: "Last name", width: 130 },
  {
    field: "age",
    headerName: "Age",
    type: "number",
    width: 90
  },
  {
    field: "fullName",
    headerName: "Full name",
    description: "This column has a value getter and is not sortable.",
    sortable: false,
    width: 160,
    valueGetter: (params) =>
      `${params.getValue("firstName") || ""} ${
        params.getValue("lastName") || ""
      }`
  }
];

const rows = [
  { id: 1, lastName: "Snow", firstName: "Jon", age: 35 },
  { id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
  { id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
  { id: 4, lastName: "Stark", firstName: "Arya", age: 16 }
];

export default function App() {
  const [selectionModel, setSelectionModel] = React.useState([]);
  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={25}
        checkboxSelection
        hideFooterPagination
        onSelectionModelChange={(newSelection) => {
          setSelectionModel(newSelection.selectionModel);
      }}
      selectionModel={selectionModel}
       
      />
      {selectionModel.map(val =><h1>{val}</h1>)}
    </div>
  );
}

我正在尝试做这样的事情（当然这是行不通的）

const greyOut = () => {
    const data = row.age
    if (data == 16){
     return (
        <TableRow style={{ color: 'grey'}}>{row}</TableRow>   
    )}
}

有人能帮忙吗？

Answer 1

您可以使用getRowClassName中的 prop <DataGrid/>。这样您就可以将某些css 类应用到匹配条件的所有行。 允许您访问行内的所有值。params.row

  <DataGrid
    ...
    getRowClassName={(params) => {
      return params.row.age === 16 ? "highlight" : "";
    }}
    ...
  />

现在你可以使用经典的 css 样式表或添加一个额外的sxprop 到你的<DataGrid/>：

  <DataGrid
    ...
    sx={{
      ".highlight": {
        bgcolor: "grey",
        "&:hover": {
          bgcolor: "darkgrey",
        },
      },
    }}
  />