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

Question

有什么方法可以从 '@devexpress/dx-react-grid-material-ui' 库中重写 TableSummaryRow 的样式？

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

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

I already tried this solution，但它对我不起作用。

这是我的组件的简化代码：

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

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

This official docs page 帮助了我。所以我使用了makeStyles方法。

这里是working DEMO。

最后一个组件（基于 Andrei Konstantinov 的回答）代码：

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"));

Answer 2

根据TableSumRow's docs你需要使用SummaryState组件。 另外，出于某种原因，即使它被标记为可选，我也无法在没有 IntegratedSummary 组件的情况下使其工作。

你可以找到工作演示here。

这是来自演示的代码。整个团队有一个总重量行。

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"));