如何重写@devexpress/dx-react-grid-material-ui的样式？

Question

是否有任何方法可以重写'@devexpress/dx-react-grid-material-ui'库中的TableSummaryRow的样式？

我所拥有的：一个组件，它呈现表（使用'@devexpress/dx-react-grid-material-ui'库），并在最后一行输出表中的总行数。

我需要做的：样式表单元格，其中TableSummaryRow呈现结果。

我已经试过这个解决办法了，但它对我不起作用。

下面是我的组件的简单代码：

import React from 'react';
import { SummaryState } from '@devexpress/dx-react-grid';
import {
  TableHeaderRow,
  TableSummaryRow
} from '@devexpress/dx-react-grid-material-ui';
import { ExtendedGrid } from 'components/DxGrid/index';

const Table = ({ rows }) => (
  <ExtendedGrid rows={rows} columns={reportColumns}>
    <SummaryState totalItems={[{ columnName: 'userName', type: 'count' }]} />
    <TableHeaderRow />
    <TableSummaryRow messages={{ count: 'Number of rows' }} />
  </ExtendedGrid>
);

export default Table;

Answer 1

根据TableSumrow的文档，您需要使用summarystate组件。此外，由于某些原因，如果没有integratedsummary组件，即使它被标记为可选，也无法使其工作。

你可以在这里找到工作演示。

下面是一段演示代码。全队有一个总重量排。

import React from "react";
import { render } from "react-dom";
import { SummaryState, IntegratedSummary } from "@devexpress/dx-react-grid";
import {
  Grid,
  Table,
  TableHeaderRow,
  TableSummaryRow
} from "@devexpress/dx-react-grid-material-ui";

class App extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      totalSummaryItems: [{ columnName: "weight", type: "sum" }],
      columns: [
        { name: "name", title: "Name" },
        { name: "weight", title: "Weight" }
      ],
      rows: [
        { name: "Sandra", weight: 123 },
        { name: "Andy", weight: 9000 },
        { name: "Einstein", weight: 56 },
        { name: "Bob", weight: 11 }
      ]
    };
  }
  render() {
    const { rows, columns } = this.state;

    return (
        <Grid rows={rows} columns={columns}>
          <SummaryState totalItems={this.state.totalSummaryItems} />
          <IntegratedSummary />
          <Table />
          <TableHeaderRow />
          <TableSummaryRow messages={{ sum: "Total weight of the group" }} />
        </Grid>
      </Paper>
    );
  }
}

render(<App />, document.getElementById("root"));

Answer 2

我自己想出来的，也许对某人有用。

这个官方文件页面帮了我。所以我使用了makestyles方法。

这里是工作演示。

和最后一个组件（基于安德烈·康斯坦丁诺夫的答案）代码：

import React from "react";
import { render } from "react-dom";
import Paper from "@material-ui/core/Paper";
import { makeStyles } from "@material-ui/styles";
import { SummaryState, IntegratedSummary } from "@devexpress/dx-react-grid";
import {
  Grid,
  Table,
  TableHeaderRow,
  TableSummaryRow
} from "@devexpress/dx-react-grid-material-ui";

const useStyles = makeStyles({
  root: {
    "& tfoot": {
      "& td": {
        background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
        "&:empty": {
          background: "none"
        }
      }
    }
  }
});

const Hook = () => {
  const data = {
    totalSummaryItems: [{ columnName: "weight", type: "sum" }],
    columns: [
      { name: "name", title: "Name" },
      { name: "weight", title: "Weight" }
    ],
    rows: [
      { name: "Sandra", weight: 123 },
      { name: "Andy", weight: 9000 },
      { name: "Einstein", weight: 56 },
      { name: "Bob", weight: 11 }
    ]
  };
  const { rows, columns } = data;
  const classes = useStyles();

  return (
    <Paper className={classes.root}>
      <Grid rows={rows} columns={columns}>
        <SummaryState totalItems={data.totalSummaryItems} />
        <IntegratedSummary />
        <Table />
        <TableHeaderRow />
        <TableSummaryRow messages={{ sum: "Total weight of the group" }} />
      </Grid>
    </Paper>
  );
};

render(<Hook />, document.getElementById("root"));